第16篇 文档对象模型.ppt

第16章 文档对象模型 文档对象模型（Document Object Model）是由W3C委员会定义的标准文档对象模型。DOM可以提供了HTML和XML两种不同的文档编程接口，其中HTML文档编程接口可以处理HTML文档内容。 16.1 DOM简介 在BOM中，使用最多的是Document对象，该对象主要用于处理HTML文档中的一些内容，如文档本身的属性、图片、表单、超链接和锚、插件等。而DOM对HTML文档的处理能力更强，可以处理任何HTML中的元素。 16.1.1 DOM中的节点 在DOM中，将HTML文档看成是一棵树，文档中的每一个标签都是一个节点。HTML中的节点可以分成文档节点（Document Node）、元素节点（Element Node）、属性节点(Attribute Node)、文本节点（Text Node）、注释节点（Comment Node）五种。其中文档节点代表整个HTML文档，元素节点代表所有HTML中的元素，属性节点代表元素中的属性，文本节点代表开始标签和结束标签之间的文字，注释节点代表HTML中的备注。 16.1.2 DOM中的接口 在DOM中，提供了不同接口来处理不同类型的节点，如Document接口可以处理文档节点、Element接口可以处理元素节点、Attr接口可以处理属性节点、CharacterData接口可以处理文本节点和注释节点。除此之外，DOM中还使用了Node接口来处理所有的接口，Node接口提供了查找节点和移动节点的能力。 16.2 Node接口 Node接口是Document接口、Element接口、Attr接口和CharacterData接口的父接口，因此该接口的方法和属性可以被这些接口继承。 16.2.1 Node接口的属性 在HTML中查找一个节点，最常用的作法就是使用Document接口的documentElement属性返回HTML文档的根节点，或使用HTMLDocument接口的body属性返回HTML文档的body节点，然后根据节点之间的关系找到要查找的节点，如子节点、兄弟节点、父节点等。可以使用Node接口的firstChild属性、lastChild属性、nextSibling属性、previousSibling属性、parentNode属性来查找需要使用的节点，这5个属性分别可以查找当前节点的第一个子节点、最后一个子节点、下一个兄弟节点、上一个兄弟节点和父节点。 16.2.2 不同浏览器对节点的处理 使用Node接口的childNodes属性可以返回一个节点下的所有子节点，然而不同的浏览器对子节点的处理会稍有不同。如代码清单16-1所示，注意加粗的文字。 16.2.3 节点类型 从图16-1中可以看出，在使用Node接口的nodeType属性输出节点类型时输出的都是数字，不同的数字代表了不同类型的节点，例如，nodeType属性值为1的节点是元素节点，而元素节点的nodeName属性就是元素的标签名。然而元素节点是没有值的，所以nodeValue属性返回null。 16.2.4 删除节点 Node接口的主要作用就是处理节点，其中Node接口的属性主要作用是查找节点和返回节点的信息，Node接口的方法则主要是复制、删除、插入、移动节点。在Node接口中，可以使用以下方法来删除一个节点下的指定子节点。 removeChild(childNode) 16.2.5 复制节点、插入节点与替换节点 使用Node接口的removeChild( )方法可以删除一个节点，在删除该节点后，DOM还可以将该节点返回，返回的节点可以插入到节点树中，或替换节点树中的某个节点。除了removeChild( )方法之外，Node接口的cloneNode( )方法也可以复制一个节点，同样复制后的节点也可以插入到节点树中或替换节点树中的某个节点。cloneNode( )方法的语法代码如下所示。 cloneNode(ifChildNode) 16.2.6 判断节点是否存在的方法 使用Node接口的hasAttributes( )方法可以用来判断当前节点是否有属性节点，如果当前节点有属性节点，该方法则返回true，否则返回false。需要注意的是，只有元素节点才存在属性节点。 16.3 Document接口 Document节点是代表整个HTML文档的节点，DOM中的Document接口就是用于操作整个HTML文档的接口。Document接口下的HTMLDocument接口是HTML专用的Document接口，该接口与BOM中的Document对象兼容。 16.3.1 访问根节点和body节点 在HTML DOM中的Document接口下只有一个属性，该属性是可以获得H