网页设计与制作教程-Web前端开发第7版课件第9章 JavaScript对象模型

上传人：h*** IP属地：山东上传时间：2024-12-14 格式：PPTX 页数：107 大小：9.54MB 积分：15 举报 版权申诉

网页设计与制作教程-Web前端开发第7版课件第9章 JavaScript对象模型_第2页

网页设计与制作教程-Web前端开发第7版课件第9章 JavaScript对象模型_第3页

网页设计与制作教程-Web前端开发第7版课件第9章 JavaScript对象模型_第4页

网页设计与制作教程-Web前端开发第7版课件第9章 JavaScript对象模型_第5页

已阅读5页，还剩102页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

BOM（BrowserObjectModel）是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。第9章JavaScript对象模型9.1BOM的对象目录第9章JavaScript对象模型9.1BOM的对象9.2DOM的对象9.3DOM与CSS习题99.1BOM的对象9.1.1BOM概述浏览器对象关系的如图所示。9.1BOM的对象9.1.2window对象1.window对象的属性9.1BOM的对象2.window对象的方法9.1BOM的对象【例9-1】显示窗口的宽、高和设置计时器，页面初次加载时依次显示3个的提示框，延时5000ms后再调用hello()函数，显示其对话框，本例文件9-1.html在浏览器中显示的效果，如图所示。9.1BOM的对象<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><scripttype="text/javascript">functionhello(){window.alert("欢迎您！");}

window.setTimeout(hello,9000);//延时9000ms后再调用hello()函数

window.alert("窗口的宽="+window.innerWidth);//获得窗口的宽度

window.alert("窗口的高="+window.innerHeight);//获得窗口的高度

mpt("mpt()","默认文本");//js中的提示输入框

</script></head><body></body></html>9.1BOM的对象9.1.3document对象1.document对象的属性9.1BOM的对象2.document对象的方法9.1BOM的对象【例9-2】使用getElementById()、getElementsByName()、getElementsByTagName()方法操作文档中的元素。浏览者填写表单中的选项后，单击“统计结果”按钮，弹出消息框显示统计结果，本例文件9-2.html在浏览器中的显示效果，如图所示。9.1BOM的对象<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>document对象</title><scripttype="text/javascript">functioncount(){varuserName=document.getElementById("userName");varhobby=document.getElementsByName("hobby");varinputs=document.getElementsByTagName("input");varresult="ID为userName的元素的值："+userName.value+"\nname为hobby的元素的个数："+hobby.length+"\n个人爱好：";for(vari=0;i<hobby.length;i++){if(hobby[i].checked){result+=hobby[i].value+"";}

}

9.1BOM的对象result+="\n标签为input的元素的个数："+inputs.length;alert(result);}</script></head><body><formname="myform">

用户名：<inputtype="text"name="userName"id="userName"><br>

爱好：<inputtype="checkbox"name="hobby"value="音乐">音乐

<inputtype="checkbox"name="hobby"value="美食">美食

<inputtype="checkbox"name="hobby"value="旅游">旅游<br><inputtype="button"value="统计结果"onclick="count()"></form></body></html>

9.1BOM的对象9.1.4location对象1.location对象的属性9.1BOM的对象2.location对象的方法9.1BOM的对象【例9-3】下面代码通过location.href属性获得当前页面的URL链接，然后重定向并打开百度主页。本例文件9-3.html在浏览器中显示如图9-4所示。<scripttype="text/javascript">window.onload=function(){alert(location.href);location.replace("");}</script>9.1BOM的对象9.1.5navigator对象9.1BOM的对象【例9-4】navigator.userAgent是最常用的属性，用来完成浏览器判断；然后返回客户端浏览器的各种信息。本例文件9-4.html在浏览器中显示如图9-5所示。9.1BOM的对象<scripttype="text/javascript">if(window.navigator.userAgent.indexOf('MSIE')!=-1){alert('我是IE');}else{alert('我不是IE');}document.write(navigator.appName+"<br>");//返回运行浏览器的名称

document.write(navigator.appVersion+"<br>");//返回运行浏览器的平台和版本信息

document.write(navigator.cookieEnabled+"<br>");//返回浏览器中是否启用cookie的布尔值

document.write(navigator.platform+"<br>");//返回运行浏览器的操作系统平台</script>9.1BOM的对象9.1.6screen对象9.1BOM的对象【例9-5】下面代码显示浏览器显示屏幕的宽度和高度、显示器屏幕的宽度和高度，本例文件9-5.html在浏览器中显示如图9-6所示，可以看到浏览器屏幕的高度与显示器的高度相差一个Windows任务栏的高度。<scripttype="text/javascript">document.write(screen.availHeight+"<br>");//返回客户端浏览器显示屏幕的高度

document.write(screen.availWidth+"<br>");//返回浏览器显示屏幕的宽度

document.write(screen.height+"<br>");//返回显示器的高度

document.write(screen.width+"<br>");//返回显示器的宽度</script>9.1BOM的对象9.1BOM的对象9.1.7history对象9.1BOM的对象例如，下面代码在网页中显示网页链接的数量，请输入几个网站后，返回到这个例子，链接数量将改变。document.write(history.length+"<br>");//初始时，该值为1history.back();//后退一页//history.forward();//前进一页//history.go(-1);//后退一页//history.go(1);//前进一页//history.go(2);//前进两页祝贺你完成了这一节的学习《网页设计与制作教程Web前端开发第7版》刘瑞新主编配套资源DOM（DocumentObjectModel，文档对象模型）是W3C标准，定义了用于HTML的一系列标准的对象，以及访问和处理HTML文档的标准方法。第9章JavaScript对象模型9.2DOM的对象目录第9章JavaScript对象模型9.1BOM的对象9.2DOM的对象9.3DOM与CSS习题99.2DOM的对象9.2.1节点和节点树1.节点DOM把HTML文档中的每一个元素都定义成一个一个的节点，整个HTML文档是一个文档节点，根元素<html>是根节点。每个HTML标签都是一个元素节点，包含在HTML标签中的文本内容是文本节点；HTML标签的每一个属性是一个属性节点。注释属于注释节点。9.2DOM的对象2.节点树DOM对象被结构化为对象树，HTML文档的所有节点组成一个节点树，HTML文档中的每个元素、属性和文本内容等都代表树中的一个节点。例如，下面HTML文档，代码如下：<!DOCTYPEhtml><html><head>

<metacharset="utf-8">

<title>文档标题</title></head><body><ahref="#">链接文字</a>

<h1>标题1</h1><p>段落文本</p></body></html>9.2DOM的对象上面代码构成的节点树，如图所示。9.2DOM的对象9.2.2DOM的操作由于HTML文档被浏览器解析后是一棵DOM树，是一个树形结构。要改变HTML的结构，就需要通过JavaScript来操作DOM。操作一个DOM节点就是以下几个操作：添加。删除。更新。遍历。9.2DOM的对象9.2.3Node对象Node（节点）对象代表文档树中的一个节点，Node对象是整个DOM的核心对象。1.Node对象的属性每个节点都有其节点的属性，Node对象的常用属性见表。9.2DOM的对象9.2DOM的对象（1）nodeNamenodeName属性含有某个节点的名称，其中：1）元素节点的nodeName值是标签名称。2）属性节点的nodeName值是属性名称。3）文本节点的nodeName值永远是#text。4）文档节点的nodeName值永远是#document。9.2DOM的对象（2）nodeValue对于文本节点，nodeValue属性包含文本内容。对于属性节点，nodeValue属性包含属性值。对于文档节点和元素节点，nodeValue属性不可用。9.2DOM的对象（3）nodeTypenodeType属性返回节点的类型，其中最重要的节点类型见表。9.2DOM的对象2.Node对象的方法Node对象的方法包含对节点的各种操作。9.2DOM的对象9.2.4HTMLDOM对象HTMLDOM是HTML的标准对象模型和编程接口。它定义了：作为对象的HTML元素；所有HTML元素的属性；访问所有HTML元素的方法；所有HTML元素的事件。换言之，HTMLDOM是关于如何获取、更改、添加或删除HTML元素的标准。9.2DOM的对象HTMLDOM独立于平台和编程语言，它可被任何编程语言（如Java、JavaScript和VBScript）使用。HTMLDOM对象见表。9.2DOM的对象9.2DOM的对象9.2.5HTMLDocument对象HTMLDocument对象表示HTML文档树的根，在BOM和HTMLDOM中被称为Document对象。每个载入浏览器的HTML文档都会成为Document对象。Document对象可以用脚本对HTML页面中的所有元素进行访问。9.2DOM的对象1.HTMLDocument对象的集合HTMLDocument对象的常用集合见表。9.2DOM的对象2.HTMLDocument对象的属性HTMLDocument对象的常用属性，见表。9.2DOM的对象3.HTMLDocument对象的方法HTMLDocument对象的常用方法见表。9.2DOM的对象9.2.6HTMLElement对象在HTMLDOM中，HTMLElement对象表示HTML文档中的任意元素，它是HTMLDOM的基本对象，提供HTML元素对象的通用属性和方法。Element对象可以拥有类型为元素节点、文本节点、注释节点的子节点。NodeList对象表示节点列表，比如HTML元素的子节点集合。元素也可以拥有属性。属性是属性节点。HTMLElement对象继承了Node和Element对象的标准属性和方法，也实现了非标准属性。9.2DOM的对象1.HTMLElement对象的属性表列出了HTMLElement对象的常用属性，表中的属性可用于所有HTML元素上。9.2DOM的对象2.HTMLElement对象的方法HTMLElement对象的常用方法见表。9.2DOM的对象9.2.7Node操作实例1.获取节点（1）通过标签的id获取document.getElementById('id属性值')（2）通过标签name属性获取document.getElementsByName('name属性值')9.2DOM的对象（3）通过class类别名获取document.getElementsByClassName('class属性值')（4）通过标签名获取document.getElementsByTagName('标签名')9.2DOM的对象【例9-6】Node对象是用于解析DOM节点树的入口，Node对象提供了对节点操作的属性和方法。本例使用Node对象的属性显示节点信息。本例文件9-6.html在浏览器中的显示效果，如图所示。9.2DOM的对象<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>显示属性值</title></head><body><pid="p1"name="text">我来自何方</p><scripttype="text/javascript">/*获取指定元素节点*/varp=document.getElementById('p1');/*判断指定节点的名称-显示标签名称*/document.write(p.nodeName+"<br/>");//显示大写:P/*判断指定节点的类型*/document.write(p.nodeType+"<br/>");//显示元素节点:1/*判断指定节点的属性值*/document.write(p.nodeValue+"<br/>");//显示:null/*获取指定元素节点的文本节点*/vartext=p.firstChild;/*判断指定节点的名称*/document.write(text.nodeName+"<br/>");//显示文本节点的固定写法:#text/*判断指定节点的类型*/document.write(text.nodeType+"<br/>");//显示文本节点:39.2DOM的对象/*判断指定节点的属性值*/document.write(text.nodeValue+"<br/>");//显示文本内容:我来自何方/*获取指定元素节点的属性节点*/varmyAttr=p.getAttributeNode('name');/*判断指定节点的名称*/document.write(myAttr.nodeName+"<br/>");//显示属性名:name/*判断指定节点的类型*/document.write(myAttr.nodeType+"<br/>");//显示属性节点:2/*判断指定节点的属性值*/document.write(myAttr.nodeValue+"<br/>");//显示属性值:text/*判断节点的类型-文档节点*///document对象表示html文档（html页面）document.write(document.nodeName+"<br/>");//显示节点的名称:#document（document对象）document.write(document.nodeType+"<br/>");//显示节点的类型:9（文档节点）document.write(document.nodeValue+"<br/>");//显示节点的值:null</script></body></html>9.2DOM的对象2.创建或增添节点（1）创建节点创建节点使用下面方法。document.createElement("HTML元素名")//创建一个HTML元素document.createTextNode(String)//创建一个文本节点document.createAttribute("属性名")//创建一个属性节点9.2DOM的对象（2）增添节点增添节点使用下面方法。1）向element内部最后添加（追加）一个节点，参数是节点类型：element.appendChild(Node)2）在element内部的existingNode前插入newNode：element.insertBefore(newNode,existingNode)9.2DOM的对象【例9-7】本例创建新的HTML元素p节点，使用appendChild()方法添加新元素到尾部；然后在已存在的元素div1中添加它。本例文件9-7.html在浏览器中的显示效果，如图所示。9.2DOM的对象<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>创建新的HTML元素(节点)-appendChild()</title></head><body><divid="div1"><pid="p1">这是第一个段落。</p><pid="p2">这是第二个段落。</p></div><scripttype="text/javascript">varpara=document.createElement("p");//创建p元素

varnode=document.createTextNode("这是一个新的段落。");//为<p>元素创建一个新的文本节点

para.appendChild(node);//将文本节点添加到<p>元素中

varelement=document.getElementById("div1");//查找已存在的元素div1element.appendChild(para);//添加到已存在的元素中

</script></body></html>9.2DOM的对象【例9-8】本例创建新的HTML元素(节点)，使用insertBefore()方法将新元素添加到指定位置。本例文件9-8.html在浏览器中显示如图所示9.2DOM的对象<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>创建新的HTML元素(节点)-appendChild()</title></head><body><divid="div1"><pid="p1">这是第一个段落。</p><pid="p2">这是第二个段落。</p></div><scripttype="text/javascript">varpara=document.createElement("p");//创建p元素varnode=document.createTextNode("这是一个新的段落。");//为<p>元素创建文本节点para.appendChild(node);//将文本节点添加到<p>元素中varelement=document.getElementById("div1");//查找已存在的元素div1varchild=document.getElementById("p2");//查找已存在的元素p2element.insertBefore(para,child);//把新建的元素插入到p2前</script></body></html>9.2DOM的对象3.删除（移除）节点删除节点使用下面方法：element.removeChild(Node)本方法的功能是删除当前节点下指定的子节点，删除成功返回该被删除的节点，否则返回null。9.2DOM的对象【例9-9】HTML文档中<div>元素包含两个子节点（两个<p>元素），删除第一个段落。本例文件9-9.html在浏览器中的显示效果，如图所示。9.2DOM的对象<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>移除第一个段落</title></head><body><divid="div1"><pid="p1">这是第一个段落。</p><pid="p2">这是第二个段落。</p></div><scripttype="text/javascript">varparent=document.getElementById("div1");//查找id="div1"的元素，父元素

varchild=document.getElementById("p1");//查找id="p1"的<p>元素

parent.removeChild(child);//从父元素中移除子节点p1</script></body></html>9.2DOM的对象4.替换HTML元素可以使用replaceChild()方法来替换HTMLDOM中的元素。parent.replaceChild(para,child);【例9-10】本例用新段落替换第一个段落。本例文件9-10.html在浏览器中的显示效果，如图所示。9.2DOM的对象<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>替换HTML元素-replaceChild()</title></head><body><divid="div1"><pid="p1">这是第一个段落。</p><pid="p2">这是第二个段落。</p></div><scripttype="text/javascript">varpara=document.createElement("p");varnode=document.createTextNode("这是一个新的段落。");para.appendChild(node);varparent=document.getElementById("div1");varchild=document.getElementById("p1");parent.replaceChild(para,child);</script></body></html>9.2DOM的对象5.获取或设置元素的属性值对获取的节点，可以得到节点的属性值，也可以设置节点的属性值。其语法格式如下：节点对象名.getAttribute(attributeName)节点对象名.setAttribute(attributeName,attributeValue)9.2DOM的对象【例9-11】本例定义了一个文本节点和元素节点，并为一级标题元素设置title属性，最后把它们添加到文档结构中。本例文件9-11.html在浏览器中的显示效果，如图所示。9.2DOM的对象<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><scripttype="text/javascript">window.onload=function(){varhello=document.createTextNode("HelloWorld!");//创建一个文本节点varh1=document.createElement("h1");//创建一个一级标题h1.setAttribute("title","你好，欢迎光临！");//为一级标题定义title属性h1.appendChild(hello);//把文本节点增加到一级标题中document.body.appendChild(h1);//把一级标题增加到文档}</script></head><body><p>ppp</p></body></html>9.2DOM的对象【例9-12】修改节点列表中所有<p>元素的背景颜色。本例文件9-12.html在浏览器中显示如图所示。9.2DOM的对象<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>HTMLDOM集合(Collection)</title></head><body><h2>JavaScriptHTMLDOM!</h2><p>HelloWorld!</p><p>你好!</p><p>点击按钮修改所有p元素的背景颜色。</p><buttononclick="myFunction()">点我</button><scripttype="text/javascript">functionmyFunction(){varmyCollection=document.getElementsByTagName("p");vari;for(i=0;i<myCollection.length;i++){myCollection[i].style.color="red";}}</script></body></html>《网页设计与制作教程-Web前端开发（第7版）》刘瑞新主编配套资源自由思想，独立思考DOM（DocumentObjectModel，文档对象模型）是W3C标准，定义了用于HTML的一系列标准的对象，以及访问和处理HTML文档的标准方法。第9章JavaScript对象模型9.3DOM与CSS目录第9章JavaScript对象模型9.1BOM的对象9.2DOM的对象9.3DOM与CSS习题99.3DOM与CSS9.3.1style对象使用style对象属性的格式为：document.getElementById("id").style.属性名="新样式值"例如，下面代码获取的样式是内联样式的值：<styletype="text/css">//内部样式

#div{color:gray;}</div><divid="div"style="color:red;"></div>//内联样式document.getElementById('id').style.color;//值为red9.3DOM与CSS1．Background属性style对象的Background属性见表。9.3DOM与CSS2．Border和Margin属性style对象的Border和Margin属性见表9-20。9.3DOM与CSS9.3DOM与CSS3．Layout属性style对象的Layout属性见表。9.3DOM与CSS9.3DOM与CSS4．List属性style对象的List属性见表。9.3DOM与CSS5．Positioning属性style对象的Positioning属性见表。9.3DOM与CSS6．Table属性style对象的Table属性见表。9.3DOM与CSS7．Text属性style对象的Text属性见表。9.3DOM与CSS9.3DOM与CSS【例9-13】本例改变<p>元素的样式。本例文件9-13.html在浏览器中显示如图9-15所示。<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>HTMLDOM-改变CSS</title></head><body><pid="p1">HelloWorld!</p><pid="p2">HelloWorld!</p><scripttype="text/javascript">document.getElementById("p2").style.color="blue";document.getElementById("p2").style.fontFamily="Arial";document.getElementById("p2").style.fontSize="30px";</script><p>以上段落通过脚本修改。</p></body></html>9.3DOM与CSS【例9-14】本例通过style对象获得CSS的属性值。当页面载入后，单击“请单击本按钮”，将在消息框中显示CSS值。本例文件9-14.html在浏览器中显示如图9-16所示。9.3DOM与CSS<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>得到CSS值</title><scripttype="text/javascript">window.onload=function(){document.getElementById("btn").onclick=function(){alert(document.getElementById("mycss").style.width);//200alert(document.getElementById("mycss").style.background);//greenyellowalert(document.getElementById("mycss").style.color);//没有这个值，为空白

}}</script></head>9.3DOM与CSS<body><divid="mycss"class="ss"style="width:200px;height:100px;background:greenyellow">JS获取CSS属性值</div><inputtype="button"id="btn"value="请单击本按钮"/></body></html>9.3DOM与CSS9.3.2currentStyle对象其格式如下：varostyle=window.getComputedStyle(element[,psevdo-element])9.3DOM与CSS【例9-15】currentStyle对象的使用，显示样式属性值。本例文件9-15.html在浏览器中显示如图9-17所示。9.3DOM与CSS<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>currentStyle对象</title><styletype="text/css">#myDiv{background-color:blue;width:200px;height:100px;}</style></head>9.3DOM与CSS<body><divid="myDiv"style="background-color:red;border:1pxsolidblack"></div><scripttype="text/javascript">varmyDiv=document.getElementById("myDiv");varcomputedStyle=document.defaultView.getComputedStyle(myDiv,null);alert(computedStyle.backgroundColor);//"red"，因内嵌样式优先级高

alert(computedStyle.width);//"200px"alert(computedStyle.height);//"100px"alert(computedStyle.border);//在某些浏览器中是“1pxsolidblack”</script></body></html>9.3DOM与CSS【例9-16】currentStyle对象的使用。当页面载入后，单击“请单击本按钮”，将在消息框中显示段落字体的大小。本例文件9-16.html在浏览器中显示如图9-18所示。9.3DOM与CSS<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>currentStyle对象</title><scripttype="text/javascript">window.onload=function(){document.getElementById("btn").onclick=function(){varop=document.getElementById("p1");varocurrentStyle=window.getComputedStyle(op,null);alert(ocurrentStyle.fontSize);

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

网页设计与制作教程-Web前端开发第7版课件第9章 JavaScript对象模型

文档简介

温馨提示

最新文档

评论

网页设计与制作教程-Web前端开发 第7版 课件 第9章 JavaScript对象模型

文档简介

温馨提示

最新文档

评论

相关文档

网页设计与制作教程-Web前端开发第7版课件第9章 JavaScript对象模型