遍历

遍历


var supportsTraversals = document.implementation.hasFeature("Traversal", "2.0");
var supportsNodeIterator = (typeof document.createNodeIterator == "function");
var supportsTreeWalker = (typeof document.createTreeWalker == "function");


NodeIterator


NodeIterator 类型是两者中比较简单的一个，可以使用 document.createNodeIterator() 方法创建它的新实例。


·root：想要作为搜索起点的树中的节点。


·whatToShow：表示要访问哪些节点的数字代码。


·filter：是一个 NodeFilter 对象，或者一个表示应该接受还是拒绝某种特定节点的函数。


·entityReferenceExpansion：布尔值，表示是否要扩展实体引用。这个参数在 HTML 页面中没有用，因为其中的实体引用不能扩展。


<div id="div1">
<p><b>Hello</b> world!</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>


var div = document.getElementById("div1");
var filter = function(node) {
return node.tagName.toLowerCase() == "li" ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
};
var iterator = document.createNodeIterator(div, NodeFilter.SHOW_ELEMENT, filter, false);
var node = iterator.nextNode();
while (node !== null) {
alert(node.tagName); //输出标签名
ndoe = iterator.nextNode();
}


TreeWalker


TreeWalker 是 NodeIterator 的一个更高级的版本。除了包括 nextNode() 和 prevlousNode() 在内的相同的功能之外，这个类型还提供了下列用于在不同方向上遍历 DOM 结构的方法。


·parentNode()：遍历到当前节点的父节点；


·firstChild()：遍历到当前节点的第一个子节点；


·lastChild()：遍历到当前节点的最后一个子节点；


·nextSibling()：遍历到当前节点的下一个同辈节点；


·previousSibling()：遍历到当前节点的上一个同辈节点。


<div id="div1">
<p><b>Hello</b> world!</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>


var div = document.getElementById("div1");
var filter = function(node) {
return node.tagName.toLowerCase() == "li" ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
};
var walker = document.createTreeWalker(div, NodeFilter.SHOW_ELEMENT, filter, false);
var node = iterator.nextNode();
while (node !== null) {
alert(node.tagName); //输出标签名
ndoe = iterator.nextNode();
}


TreeWalker 真正强大的地方在于能够在 DOM 结构中眼任何方向移动。使用 TreeWalker 遍历 DOM 树，即使不定义过滤器，也可以取得所有<li>元素，如下面的代码所示。
var div = document.getElementById("div1");
var walker = document.createTreeWalker(div, NodeFilter.SHOW_ELEMENT, null, false);


walker.firstChild(); //转到<p>
walker.nextSibling(); //转到<ul>


var node = walker.firstChild(); //转到第一个<li>
while (node !== null) {
alert(node.tagName);
node = walker.nextSibling();
}


TreeWalker 类型还有一个属性，名叫 currentNode，表示任何遍历方法在上一次遍历中返回的节点。通过设置这个属性也可以修改遍历继续进行的起点，如下面的例子所示。
var node = walker.nextNode();
alert(node === walker.currentNode); //true
walker.currentNode = document.body; //修改起点


与 nodeIterator 相比，TreeWalker 类型在遍历 DOM 时拥有更大的灵活性。由于 IE 中没有对应的类型和方法，所以使用遍历的跨浏览器解决方案非常少见。