JS应用DOM入门(3)：简单文档DOM结构分析
一个简单文档的DOM结构分析
下面让我们来对一个简单的文档进行分析，最终形成它的DOM结构。要分析的文档包括3个段落，HTML代码如下：
请注意，从现在开始，我们就要按照Tree结构以及家族关系的方式来看待整个文档了。 <BODY>标记是Tree的根节点，它包含了4个孩子节点：p1Node、文本项节点（“This is the document body”）、p2Node和p3Node。每个孩子节点或者是一个HTML标记型节点，或者是一个文本项型节点。在一对开始标记和结束标记间的内容属于这个标记的孩子节点，比如“This is paragraph1”就是p1Node节点的孩子节点，同时它本身也是一个文本项型节点。文本项型节点必须包含一个非空字符，因此，第2段和第3段的孩子节点是不存在的。
这里有上述HTML文档的DOM Tree图示，它能帮助我们更好地理解节点间的相互关系：
下面让我们来对一个简单的文档进行分析，最终形成它的DOM结构。要分析的文档包括3个段落，HTML代码如下：
| <HTML> <HEAD> <TITLE> Simple DOM Demo </TITLE> </HEAD> <BODY ID="bodyNode"><P ID = "p1Node">This is paragraph 1.</P> This is the document body <P ID = "p2Node"> </P> <P ID = "p3Node"></P> </BODY> </HTML> |
请注意，从现在开始，我们就要按照Tree结构以及家族关系的方式来看待整个文档了。 <BODY>标记是Tree的根节点，它包含了4个孩子节点：p1Node、文本项节点（“This is the document body”）、p2Node和p3Node。每个孩子节点或者是一个HTML标记型节点，或者是一个文本项型节点。在一对开始标记和结束标记间的内容属于这个标记的孩子节点，比如“This is paragraph1”就是p1Node节点的孩子节点，同时它本身也是一个文本项型节点。文本项型节点必须包含一个非空字符，因此，第2段和第3段的孩子节点是不存在的。
这里有上述HTML文档的DOM Tree图示，它能帮助我们更好地理解节点间的相互关系：
HTML中有一些标记不包含关闭括弧，这种情况下，我们可以将下一个紧挨者的标记作为关闭括弧对待。比如<LI>标记可以将紧挨者的<LI>或<UL>标记作为关闭标识。
简单文档的节点导航
文档的DOM Tree结构为每个标记和文本项设置了一个节点，对于任一被分配了ID属性的节点，都可以作为起始点开始整个Tree的“攀登”。而且，借助DOM属性的强大功能，我们可以寻址到Tree中的每一个节点。
在继续讲述前，请再次看看上一节中的简单文档的HTML源代码以及它的DOM Tree结构图。我们可以得知：图中的箭头表示了可以到达Tree中其他节点的导航路线；<BODY>标记的ID属性值是bodyNode，3个<P>标记的ID属性值依次为p1Node、p2Node和p3Node。下面，我们分别从不同的节点开始，举例说明如何寻址到其他的节点：
| 起始节点 | 到达节点 | 寻址表达式 |
| <BODY> | p1Node | bodyNode.firstChild 或bodyNode.childNodes[0] |
| p1Node的孩子节点 | bodyNode.firstChild.firstChild | |
| 文本项节点 | bodyNode.childNodes[1] | |
| p3Node | BodyNode.childNodes[3] 或bodyNode.lastChild | |
| p1Node | 文本项节点 | p1Node.nextSibling |
| p2Node | p1Node.nextSibling.nextSibling | |
| p3Node | p1Node.nextSibling.nextSibling.nextSibling | |
| p3Node | p1Node的孩子节点 | p3Node.previousSibling.previousSibling.previousSibling.childNodes[0] |
以上列举的都是从双亲（parent）到孩子或者孩子到孩子方向的寻址表达式，借助我们介绍另外一种导航方向：使用parentNode属性从孩子到双亲。比如：要从每一个<P>标记开始寻址到<BODY>标记，可以使用p1Node.parentNode、p2Node.parentNode或者 p3Node.parentNode。
为了加深对以上节点导航表达式的理解，我们编写了一段JavaScript代码，它将显示出文档DOM的每个节点的nodeName值。请注意，除了上面举例的简单文档中涉及到的节点外，还包含一个<Script>标记节点。为了不使问题复杂化，代码中不使用lastChild属性。代码如下：
| <HTML> <HEAD> <TITLE> Simple DOM Demo </title> <STYLE>TYPE="text/CSS"> <!-- FORM.tb {display:inline;} .twidth{width:100%} .include{ font-size: 75%; font-family: verdana, arial, helvetica;} .includebig{font-family: verdana, arial, helvetica;} .includebig A:link { color: blue; } .includebig A:visited { color: purple; } .include A:link { color: blue; } .include A:visited { color: purple; } .submitter { font-size: 75%; font-family: verdana, arial, helvetica; } pre.code {color: #660099; margin-left:5%} address {text-align: right} body {background:#FFFFFF; margin-left: 5%; margin-right: 5%} --> </STYLE> </HEAD> <BODY ID="bodyNode"><P ID = "p1Node">This is paragraph 1.</P> This is the document body <P ID = "p2Node"> </P> <P ID = "p3Node"></P> <SCRIPT LANGUAGE="JavaScript"> alert( "bodyNode.firstChild.nodeName = " + bodyNode.firstChild.nodeName + "\n" + "bodyNode.firstChild.data = " + bodyNode.firstChild.data + "\n" + "bodyNode.childNodes[0].nodeName = " + bodyNode.childNodes[0].nodeName + "\n" + "bodyNode.childNodes[1].nodeName = " + bodyNode.childNodes[1].nodeName + "\n" + "bodyNode.childNodes[1].data = " + bodyNode.childNodes[1].data + "\n" + "bodyNode.childNodes[3].nodeName = " + bodyNode.childNodes[3].nodeName + "\n" + "bodyNode.childNodes[4].nodeName = " + bodyNode.childNodes[4].nodeName + "\n" + "p1Node.nextSibling.nodeName = " + p1Node.nextSibling.nodeName + "\n" + "p1Node.nextSibling.nextSibling.nodeName = " + p1Node.nextSibling.nextSibling.nodeName + "\n" + "p1Node.nextSibling.nextSibling.nextSibling.nodeName = " + p1Node.nextSibling.nextSibling.nextSibling.nodeName+ "\n" + "p3Node.previousSibling.previousSibling.previousSibling.childNodes[0].nodeName = " + p3Node.previousSibling.previousSibling.previousSibling.childNodes[0].nodeName + "\n" + "p1Node.parentNode.nodeName = " + p1Node.parentNode.nodeName + "\n" + "p2Node.parentNode.nodeName = " + p2Node.parentNode.nodeName + "\n" + "p3Node.parentNode.nodeName = " + p3Node.parentNode.nodeName + "\n" + "bodyNode.firstChild.firstChild.parentNode.parentNode.nodeName = " + bodyNode.firstChild.firstChild.parentNode.parentNode.nodeName + "\n" ); </SCRIPT> </BODY> </HTML> |
执行后，结果图示如下：
