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> |
执行后,结果图示如下: