• 当前位置:首页>>JavaScript教程>>JavaScript基础教程>>JS应用DOM入门:简单文档DOM结构分析
  • JS应用DOM入门:简单文档DOM结构分析
  •   一个简单文档的DOM结构分析

      下面让我们来对一个简单的文档进行分析,最终形成它的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>

      执行后,结果图示如下:


    [1]

  • 上一篇:HTML4.0简明手册 (七)
    下一篇:ASX文件简介