-

到目前为止，我们研究了DOM结构，如何加载和解析XML DOM对象并遍历DOM对象。这里我们将看到我们如何在DOM对象中的节点之间导航。XML DOM由节点的各种属性组成，可帮助我们浏览节点，如：

下面是一个简单的节点树图，显示了与其他节点的关系

DOM - 父节点

此属性将父节点指定为节点对象。

例

下面的例子（navigate_example.htm）解析XML文档（node.xml）成XML DOM对象。然后，DOM对象通过childNode导航到父节点：

<!DOCTYPE html>
<html>
   <body>
      <script>
         if (window.XMLHttpRequest)
         {
            xmlhttp = new XMLHttpRequest();
         }
         else
         {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         }
         xmlhttp.open("GET","/dom/node.xml",false);
         xmlhttp.send();
         xmlDoc=xmlhttp.responseXML;

         var y=xmlDoc.getElementsByTagName("Employee")[0];
         document.write(y.parentNode.nodeName);
      </script>
   </body>
</html>

从上面的例子可以看出，childNodeEmployee导航到其父节点。

执行

在服务器路径上将此文件另存为navigate_example.html（此文件和node.xml应位于服务器上相同的路径上）。在输出中，我们得到了Employee ie Company的父节点。

first child

此属性类型为Node，并且表示NodeList中存在的第一个子名称。

例

下面的例子（first_node_example.htm）解析XML文档（node.xml）成XML DOM对象，然后导航到第一个childNode存在于DOM对象的。

<!DOCTYPE html>
<html>
   <body>
      <script>
         if (window.XMLHttpRequest)
         {
            xmlhttp = new XMLHttpRequest();
         }
         else
         {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         }
         xmlhttp.open("GET","/dom/node.xml",false);
         xmlhttp.send();
         xmlDoc=xmlhttp.responseXML;

         function get_firstChild(p)
         {
            a=p.firstChild;

            while (a.nodeType!=1)
            {
               a=a.nextSibling;
            }
            return a;
         }
         var firstchild = get_firstChild(xmlDoc.getElementsByTagName("Employee")[0]);
         document.write(firstchild.nodeName);
      </script>
   </body>
</html>

执行

在服务器路径上将此文件另存为first_node_example.htm（此文件和node.xml应位于服务器上相同的路径上）。在输出中，我们得到了Employee ie FirstName的第一个childNode。

lastChild

此属性类型为Node，并表示NodeList中存在的最后一个子名。

例

下面的例子（last_node_example.htm）解析XML文档（node.xml）成XML DOM对象，然后导航到存在于XML DOM对象的最后一个childNode。

<!DOCTYPE html>
  <body>
      <script>
         if (window.XMLHttpRequest)
         {
            xmlhttp = new XMLHttpRequest();
         }
         else
         {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         }
         xmlhttp.open("GET","/dom/node.xml",false);
         xmlhttp.send();
         xmlDoc=xmlhttp.responseXML;

         function get_lastChild(p)
         {
             a=p.lastChild;

             while (a.nodeType!=1)
             {
                a=a.previousSibling;
             }
             return a;
         }
         var lastchild=get_lastChild(xmlDoc.getElementsByTagName("Employee")[0]);
         document.write(lastchild.nodeName);
      </script>
   </body>
</html>

执行

将该文件作为last_node_example.htm保存在服务器路径上（此文件和node.xml应与服务器中的路径相同）。在输出中，我们得到Employee ie Email的最后一个childNode。

下一个兄弟姐妹

该属性类型为Node，并表示下一个子节点，即NodeList中存在的指定子元素的下一个兄弟节点。

例

下面的例子（nextSibling_example.htm）解析XML文档（node.xml）转换成立即导航到下一个节点存在于XML文档中的XML DOM对象

<!DOCTYPE html>
   <body>
      <script>
         if (window.XMLHttpRequest)
         {
            xmlhttp = new XMLHttpRequest();
         }
         else
         {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         }
         xmlhttp.open("GET","/dom/node.xml",false);
         xmlhttp.send();
         xmlDoc=xmlhttp.responseXML;

         function get_nextSibling(p)
         {
            a=p.nextSibling;

            while (a.nodeType!=1)
            {
               a=a.nextSibling;
            }
            return a;
         }
         var nextsibling=get_nextSibling(xmlDoc.getElementsByTagName("FirstName")[0]);
         document.write(nextsibling.nodeName);
      </script>
   </body>
</html>

执行

在服务器路径上将此文件另存为nextSibling_example.htm（此文件和node.xml应位于服务器中相同的路径上）。在输出中，我们得到了FirstName的下一个兄弟节点， 即LastName。

previousSibling

此属性类型为Node，并表示前一个子节点，即NodeList中存在的指定子元素的先前兄弟节点。

例

下面的例子（previoussibling_example.htm）解析XML文档（node.xml）成XML DOM对象，那么导航最后一个childNode的存在的XML文档中的节点之前

<!DOCTYPE html>
   <body>
      <script>
         if (window.XMLHttpRequest)
         {
            xmlhttp = new XMLHttpRequest();
         }
         else
         {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         }
         xmlhttp.open("GET","/dom/node.xml",false);
         xmlhttp.send();
         xmlDoc=xmlhttp.responseXML;

         function get_previousSibling(p)
         {
            a=p.previousSibling;

            while (a.nodeType!=1)
            {
               a=a.previousSibling;
            }
            return a;
         }

         prevsibling=get_previousSibling(xmlDoc.getElementsByTagName("Email")[0]);
         document.write(prevsibling.nodeName);
      </script>
   </body>
</html>

执行

将此文件另存为服务器路径上的previoussibling_example.htm（此文件和node.xml应与服务器中相同的路径）。在输出中，我们得到了先前的电子邮件节点， 即ContactNo。

© 2023 mianshi8.net MIT license