遍历DOM

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

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

<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文档里面选择一个或多个节点。有三个主要方法:

  • getElementById
  • getElementsByClassName
  • getElementsByTagName

example

<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属性确定子节点的个数。可以通过循环遍历全部子节点,获得子节点的信息。

<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>

原文链接