网页设计与制作教程Web前端开发（第7版）课件：JavaScript对象模型-DOM的对象_第1页
网页设计与制作教程Web前端开发（第7版）课件：JavaScript对象模型-DOM的对象_第2页
网页设计与制作教程Web前端开发（第7版）课件：JavaScript对象模型-DOM的对象_第3页
网页设计与制作教程Web前端开发（第7版）课件：JavaScript对象模型-DOM的对象_第4页
网页设计与制作教程Web前端开发（第7版）课件：JavaScript对象模型-DOM的对象_第5页
已阅读5页，还剩39页未读， 继续免费阅读

下载本文档

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

文档简介

DOM（DocumentObjectModel，文档对象模型）是W3C标准，定义了用于HTML的一系列标准的对象，以及访问和处理HTML文档的标准方法。

JavaScript对象模型DOM的对象目录

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><!--<html>是元素节点--><head><!--<head>是元素节点-->

<metacharset="utf-8"><!--<meta>是元素节点，其中的charset是属性节点-->

<title>文档标题</title><!--<title>是元素节点，其中的“文档标题”是文本节点--></head><body><!--<body>是元素节点--><ahref="#">链接文字</a><!--<a>是元素节点，其中的href是属性节点，“链接文字”是文本节点-->

<h1>标题1</h1><!--<h1>是元素节点，其中的“标题1”是文本节点--><p>段落文本</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","你好，欢迎光临！");//为一级标题定义ti

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

温馨提示

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

最新文档

评论

0/150

提交评论