谋智社区

原文地址：DOM Traversal in Firefox 3.5
系列地址：颠覆网络35天

====================================

Firefox 3.5中包含了两个全新的W3C DOM遍历规范实现。第一个，元素遍历API，主要针对逐个元素的遍历更简便；第二个，NodeIterator接口，允许更加容易的找到任何节点。

元素遍历API

元素遍历API的目的是为开发人员提供更加简单的方法来遍历DOM元素，不用在担心文本节点、注释节点等等。这曾经是开发人员的一剂毒药，例如使用document.documentElement.firstChild经常会产生不同的结果，可能仅仅是因为文档结构中多个空格，造成多个文本节点之类的。

元素遍历API提供一系列新的DOM节点属性。

这里是一份完整的现存DOM节点属性和全新副本的细分列表：

这些属性为DOM规范作了有效补充（老实说，真应该从开始就有这些属性）。

不过还是有一个属性一如既往的缺失：.childElements（对应于.childNodes）。这个属性（包含DOM元素的所有子元素的NodeSet）在规范的前个版本中提出过，不过在最后貌似没有通过。

不过也差不多了，现在IE、Opera和Safari都支持.children属性可以提供类似于.childElements的功能集合。元素遍历API在Firefox 3.5的实现中也包括了.children。这就意味着在所有主流浏览器中都支持这一属性。（不过离所有浏览器支持其他真正的元素遍历规范还比较远。）

一些使用元素遍历API（以及.children）的代码示例：

点击发生时显示下个元素：

someElement.addEventListener(“click”, function(){
    this.nextElementSibling.style.display = “block”;
}, false);

为所有子元素添加class：

for ( var i = 0; i < someElement.children.length; i++ ) {
    someElement.children[ i ].className = “active”;
}

NodeIterator API

NodeIterator是一个比较旧的API，不过一直没有被广泛支持，现在在Firefox 3.5中开始支持。NodeIterator API被设计为简便快捷的在DOM文档中遍历所有节点（包括文本节点、注释节点等）。

API本身有点让人费解（包含一些开发人员根本不在意的特性），但是如果你希望使用他，还是非常简便的。

API通过生成一个NodeIterator（使用document.createNodeIterator）并传入一系列过滤器来遍历节点。NodeIterator可以返回文档中所有节点（或者在某个给点节点下所有节点），然后你会希望对他进行过滤仅仅给出你需要的。可以看看下面的例子。

生成NodeIterator遍历文档中所有的注释节点：

var nodeIterator = document.createNodeIterator(
    document,
    NodeFilter.SHOW_COMMENT,
    null,
    false
);
var node;
while ( (node = nodeIterator.nextNode()) ) {
    node.parentNode.removeChild( node );
}

NodeIterator是双向链表似的结构（可以在任何方向上移动，使用previousNode 或者 nextNode）。

也许使用这个API最合适的地方是用来遍历最常用的（但是最难遍历的）节点，例如注释和文本节点～～