文档的的结构

5.3.1　HTML文档的DOM的Tree结构

DOM的Tree结构分析是按照“树”的结构以及家族关系的方式来看待整个文档(见图5-2)。“树”是由一个个节点组成的。每个节点要么是一个HTML标记的节点，要么是一个文本项型节点。有些节点拥有孩子节点，而有些节点不存在孩子节点。＜html＞标记是“树”的根节点，它包含了2个孩子节点: head和body。head包含两个孩子节点，title和style。而body则包括P(1)(第一个P元素标记)、#text、P(2)(第2个P元素标记)和P(3)(第3个P元素标记)这几个孩子节点。其中#text是一个文本节点，是指文本串“This is the document body”。在一对开始标记和结束标记间的内容属于这个标记的孩子节点，比如“This is paragraph1”就是p1Node节点的孩子节点，同时它本身也是一个文本项型节点。文本项型节点必须包含一个非空字符，因此，p2和p3的孩子节点是不存在的。

图5-2　DOM的Tree结构

DOM把每一个节点都认为是Node对象，该对象是1级核心DOM．。节点对象名称由HTML元素的id的属性值给出。Node对象有以下几个较重要的属性和方法。

nodeName:节点的名称。

nodeValue:节点的值(对于Text节点而言)。

firstChild:第一个孩子节点。

lastChild:最后一个孩子节点。

nextSilbling:后面的兄弟节点。

previousSibiling:前面的兄弟节点。

appendChild():追加一个孩子节点。

insertBefore():在指定节点前插入一个节点。

removeChild():删除一个孩子节点。

replaceChild(newchild，oldchild):用新节点替换一个孩子节点。

hasChildNodes():判断是否有孩子节点。

我们可以用JavaScript语句观察出DOM的结构:

图5-3　IE下显示出的JavaScript对节点的操作

这里需要注意的是，不同的浏览器对DOM Tree的理解稍有不同，比如Firefox把空格甚至回车都当成#text，而IE则忽略空格和回车，认为它们不构成#text。如图5-3所示。