【译文】如何遍历DOM

遍历DOM   原文链接

在和浏览器网页文档交互的时候,DOM是各种操作的基础。 它的接口允许我们和网页内容交互,更好的理解文档模型。遍历DOM 就是”全部通过”, 就是基于HTML元素(DOM节点)之间的关系完成查找。从一个选择集开始,遍历选择集合直到到达期望的结果。

在DOM里,文档对象是节点的根。DOM用一个树表示HTML 页面, 就像用同样的“家族树”表示你的家谱一样。学习如何在DOM树里上下导航,在分支之间移动,可以深刻领会JavaScript和HTML的工作机理。树型的根对象是文档对象,可以有父节点,子节点和兄弟节点,依据它们在树型结构里的位置确定。每个树型里面的元素称为节点Node。

<!DOCTYPE html>
  <html>
    <head>
      <title>The DOM</title>
    </head>
    <body>
      <h1>Document Object Model</h1>
      <p id="pr">Test Paragraph</p>
    </body>
  </html>

DOM 节点

DOM树里面的每一个节点是一个对象,表示页面里面的一个单独元素。节点保存与它们相邻节点之间的相互关系,并存储关于它们自己的有效的信息。任何节点的父节点是它的上一级节点,是在DOM 层次中临近这个文档元素的。一个节点的子节点是它的下一级节点。一个节点的兄弟节点是在DOM里面与之处于同一级的节点。除了childNodes,全部的属性都包含对另一个节点对象的引用。childNodes属性包含一个节点数组。有几个标准的方法,可以用它们从HTML文档里面选择一个或多个节点。有三个主要方法:

  1. getElementById
  2. getElementsByClassName
  3. getElementsByTagName

example

<!DOCTYPE html>
<html>
  <body>
    <p>Days:</p>
    <ul id="days">
      <li id="col1">Sunday</li>
      <li id="col2">Monday</li>
      <li id="col3">Tuesday</li>
      <li id="col3">Wednesday</li>
    </ul>
    <button onclick="findDay()">Try it</button>
    <script>
      function findDay() {
        var fChild = document.getElementById("days").childNodes[1].innerHTML;
        alert("First Child :" + fChild);
      }
    </script>
  </body>
</html>

childNodes 返回一个节点的子节点的集合,length属性确定子节点的个数。可以通过循环遍历全部子节点,获得子节点的信息。

<!DOCTYPE html>
<html>
  <body>
    <p>Days:</p>
    <ul id="days">
      <li id="col1">Sunday</li>
      <li id="col2">Monday</li>
      <li id="col3">Tuesday</li>
      <li id="col3">Wednesday</li>
    </ul>
    <button onclick="findElements()">Try it</button>
    <script>
      function findElements() {
        var childNodes = document.body.childNodes;
        for(var i=0; i<=childNodes.length; i++) {
          alert(childNodes[i].innerHTML)
        }
      }
    </script>
  </body>
</html>



此条目发表在博客, 服务器, 程序开发, 计算机安全分类目录,贴了, , , , 标签。将固定链接加入收藏夹。