《文档对象模型》PPT课件.ppt

1、第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中的节点可以分成文档节点（D

2、ocument Node）、元素节点（Element Node）、属性节点(Attribute Node)、文本节点（Text Node）、注释节点（Comment Node）五种。其中文档节点代表整个HTML文档，元素节点代表所有HTML中的元素，属性节点代表元素中的属性，文本节点代表开始标签和结束标签之间的文字，注释节点代表HTML中的备注。,16.1.2 DOM中的接口,在DOM中，提供了不同接口来处理不同类型的节点，如Document接口可以处理文档节点、Element接口可以处理元素节点、Attr接口可以处理属性节点、CharacterData接口可以处理文本节点和注释节点。除此之外

3、，DOM中还使用了Node接口来处理所有的接口，Node接口提供了查找节点和移动节点的能力。,16.2 Node接口,Node接口是Document接口、Element接口、Attr接口和CharacterData接口的父接口，因此该接口的方法和属性可以被这些接口继承。,16.2.1 Node接口的属性,在HTML中查找一个节点，最常用的作法就是使用Document接口的documentElement属性返回HTML文档的根节点，或使用HTMLDocument接口的body属性返回HTML文档的节点，然后根据节点之间的关系找到要查找的节点，如子节点、兄弟节点、父节点等。可以使用Node接口的f

4、irstChild属性、lastChild属性、nextSibling属性、previousSibling属性、parentNode属性来查找需要使用的节点，这5个属性分别可以查找当前节点的第一个子节点、最后一个子节点、下一个兄弟节点、上一个兄弟节点和父节点。,16.2.2 不同浏览器对节点的处理,使用Node接口的childNodes属性可以返回一个节点下的所有子节点，然而不同的浏览器对子节点的处理会稍有不同。如代码清单16-1所示，注意加粗的文字。,16.2.3 节点类型,从图16-1中可以看出，在使用Node接口的nodeType属性输出节点类型时输出的都是数字，不同的数字代表了不同类型

5、的节点，例如，nodeType属性值为1的节点是元素节点，而元素节点的nodeName属性就是元素的标签名。然而元素节点是没有值的，所以nodeValue属性返回null。,16.2.4 删除节点,Node接口的主要作用就是处理节点，其中Node接口的属性主要作用是查找节点和返回节点的信息，Node接口的方法则主要是复制、删除、插入、移动节点。在Node接口中，可以使用以下方法来删除一个节点下的指定子节点。 removeChild(childNode),16.2.5 复制节点、插入节点与替换节点,使用Node接口的removeChild( )方法可以删除一个节点，在删除该节点后，DOM还可以将

6、该节点返回，返回的节点可以插入到节点树中，或替换节点树中的某个节点。除了removeChild( )方法之外，Node接口的cloneNode( )方法也可以复制一个节点，同样复制后的节点也可以插入到节点树中或替换节点树中的某个节点。cloneNode( )方法的语法代码如下所示。 cloneNode(ifChildNode),16.2.6 判断节点是否存在的方法,使用Node接口的hasAttributes( )方法可以用来判断当前节点是否有属性节点，如果当前节点有属性节点，该方法则返回true，否则返回false。需要注意的是，只有元素节点才存在属性节点。,16.3 Document接口,

7、Document节点是代表整个HTML文档的节点，DOM中的Document接口就是用于操作整个HTML文档的接口。Document接口下的HTMLDocument接口是HTML专用的Document接口，该接口与BOM中的Document对象兼容。,16.3.1 访问根节点和body节点,在HTML DOM中的Document接口下只有一个属性，该属性是可以获得HTML文档根节点的documentElement属性。documentElement属性返回的是节点。另外，为了扩展Document接口的功能，W3C在Document接口下添加了一个HTMLDocument子接口。该子接口可以全面

8、兼容BOM的Document对象。引用HTMLDocument接口与引用Document接口的方式相同，都是使用“document”语句。在HTMLDocument接口中有一个重要的属性：body，该属性可以直接引用节点。如以下代码中，第1行代码可以引用节点，第2行代码可以引用节点。 document.documentElement document.body,16.3.2 创建节点,Document接口是用于操作HTML文档的接口，而HTML文档是由节点构成，因此可以使用Document接口来创建HTML中的各种节点，如以下代码所示。 createElement(name) createAt

9、tribute(name) createTextNode(data) createComment(data),16.3.3 查找节点,Document接口提供了在整个文档中查找节点的方法，这些方法如下所示。 getElementById(id) getElementsByTagName(name) getElementsByName(name),16.4 Element接口,Element接口用于处理元素节点，如查找节点、处理节点属性等。Element接口只有一个tagName属性，该属性可以返回元素节点的标签名。,16.4.1 查找节点,Document接口提供了查找节点的方法，这些方法都是

10、在整个HTML文档中查找节点。事实上，在Document接口的查找节点的3个方法中，只有getElementById( )方法是使用最多的，因为在一个HTML文档中不允许出现相同id属性的节点，因此该方法只能返回一个节点。而Document接口的getElementsByTagName( )方法和getElementsByName( )方法返回的节点可能就会有很多了。 Element接口中也提供了getElementsByTagName( )方法查找节点，但这个方法的查找范围比较小，只能在当前节点下的所有子节点中查找，因此，返回的结果要更准确些，也更易于处理。,16.4.2 操作属性,在HTM

11、L中的标签里，可以允许添加多个属性，而在Element接口中，也有相应的操作属性的方法，这些方法如以下代码所示。 hasAttribute(name) getAttribute(name) setAttribute(name,value) removeAttribute(name),16.4.3 通过属性节点操作属性,Element接口除了提供getAttribute( )方法、setAttribute( )方法和removeAttribute( )方法来直接操作元素节点的属性之外，还提供了getAttributeNode( )方法、setAttributeNode( )方法和removeAt

12、tributeNode( )方法方法来操作元素节点的属性节点，这3个方法的语法代码如下所示。 getAttributeNode(name) setAttributeNode(attr) removeAttributeNode(attr),16.5 Attr接口,Attr接口可以用来处理属性节点，在DOM中，属性节点并不是直接依附在DOM的节点树上，不能通过节点的遍历来找到属性节点，但属性节点是依附在元素节点下的，可以通过元素节点来找到属性节点。,16.6 CharacterData接口,CharacterData接口提供了操作文本节点和注释节点的方法和属性，CharacterData接口的主要

13、作用是处理文本节点和注释节点的内容。,16.6.1 文本节点内容,CharacterData接口有data和length两个属性 ，其中data属性可以返回或设置文本节点中的内容，而length属性为文本节点内容所包含的文字数。,16.6.2 CharacterData接口的方法,CharacterData接口的主要作用就是处理文本节点和注释节点，这两种节点的都是以字符串为主，所以，CharacterData接口提供的方法都与字符串处理相关。CharacterData接口常用的方法如下所示。 appendData(string) deleteData(begin,count) insertData(begin,string) replaceData(begin,count,string) substringData(begin,string),16.7 兼容BOM的接口,为了可以兼容BOM，DOM在Document接口下添加了一个HTMLDocument子接口，该子接口可以全面兼容BOM的Document对象。例如，BOM的Document对象的title属性可以返回当前文档的标题，而HTMLDocument子接口的title属性也可以返回当前文档的标题，其引用方式如下