网页设计与制作（HTML+CSS+JS）-3期（KC003） JavaScirpt元素的控制 8文档对象模型.pptx

1 文档对象模型 Part ◎ 初识文档对象模型 ◎ DOM对象节点类型 ◎ DOM对象节点的基本操作 ◎ DOM对象节点的创建与修改 1 初识文档对象模型 DOM（Document　Object　Model）是文档对象模型的缩写。DOM 是这样规定的： 整个文档是一个文档节点 ； 每个 HTML 标签是一个元素节点 ； 包含在 HTML 元素中的文本是文本节点 ； 每一个 HTML 属性是一个属性节点 ； 注释属于注释节点。 1 初识文档对象模型 举例演示 【实例10-23】HTML代码结构来感性的认识一下DOM对象的树结构。 2 DOM对象节点类型 最常用的节点类型 节点类型 返回值 节点含义 节点用途 Doucument 9 文档节点 它是HTML文档的父节点，也是整个DOM文档的根节点 Element 1 元素节点 可以作为非终端节点，可以有自己的属性节点 Attr 2 属性节点 不能成为独立节点，必须以元素节点成为父节点 Text 3 文本节点 可以成为独立的终端节点，没有子节点、没有属性节点 Comment 8 注释节点 用来说明HTML是什么版本，或者注释 1.元素节点（element node） 元素节点（element node）是构建DOM树形结构的基础，可以作为非终端节点，可以有自己的属性节点、下级元素节点和下级文本节点，下级元素节点实现了DOM树纵向扩展，同级元素节点实现了DOM树横向扩展。元素节点在没有如何任何节点的情况下它就是终端节点。元素节点的节点类型号为1。 2.属性节点（attribute node） 属性节点（attribute node）是一个键值对，键是属性名，值是属性值，属性节点不能成为独立节点，它必须从属于元素节点，用来描述元素节点的属性，充实元素节点的内容，因此，可以说属性节点不是节点，在DOM的操作中使用的方法也与其他节点不同。属性节点的节点类型号为2。 3.文本节点（text node） 文本节点（text node）表示一段文本，只能作为独立的终端节点，没有子节点和属性节点。文本节点的节点类型号为3。 4.注释节点（text node） 注释节点是用来说明所用的XHTML或者HTML是什么版本，或用来添加注释文本的。 !DOCTYPE html这些代码称做DOCTYPE声明。DOCTYPE是document type(文档类型)的简写，用来说明所用的XHTML或者HTML是什么版本。 !--注释文本--表示一段注释。 以上两个例子有个共同的特点就是都带有感叹号“!”。注释节点的节点类型号为8。 3 DOM对象节点的基本操作 DOM对象的访问是操作DOM节点的先决条件。 1.访问子节点 childNodes属性, 返回包含文本节点及标签节点的子节点集合，文本节点和属性节点的childNodes永远是null。利用childNodes.length可以获得子节点的数目，通过循环与索引查找节点。在nodeList集合中每一个数组元素都是一个节点对象，这些节点对象都有nodeType、nodeName、nodeValue等常见属性。 举例演示 【实例10-23】输出超链接中的文本节点的值。 2. 访问父节点 parentNode()方法与parentElement()方法返回唯一的父节点，父节点不存在时返回null。这两个方法完全等价，因为只有Element节点才能作为父节点。node.parentElement() 返回node节点的父节点。DOM顶层节点是document内置对象，document.parentNode()返回null。 如果，将“实例10-23”中的“alert(node.nodeValue);”修改为： alert(node.parentNode.parentNode.nodeName); 则会连续返回两个“li”元素，因为文本节点的父节点是A，而A的父节点是li元素。 3. firstChild和lastChild节点 firstChild属性返回第一个子节点，firstChild与childNodes[0] 等价。 lastChild属性返回最后一个子节点，lastChild与childNodes[childNodes.length-1] 等价。 4. firstChild和lastChild节点 nextSibling属性返回同级的下一个节点，最后一个节点的nextSibling属性为null； previousSibling属性返回同级的上一个节点，第一个节点的previousSibling属性为null。 4 DOM对象节点的创建与修改 1.创建节点 通过document内置对象（也是DOM顶层对象）的方法创建不同类型DOM节点对象。针对前面介绍的最