Firefox 3.5中包括了对两个W3C DOM遍历规范的支持。第一个是元素遍历API,用来使得遍历元素变得简单;第二个是NodeIterator(节点迭代器)接口,用来使得根据类型查找节点变得简单。
元素遍历API
元素遍历API的目的是使得开发人员可以很容易的遍历DOM元素,而不需要担心中间的文本节点、注释节点等。开发人员因为这个吃了很多苦头,比如document.documentElement.firstChild会根据文档中白字符的结构不同,而产生不同的结果。
元素遍历API提供了一系列新的DOM节点属性,可以更加简单的进行遍历。下面列出来已有的DOM节点属性和对应的新属性:
作用 | 所有DOM节点 | 仅元素节点 |
---|---|---|
第一个 | .firstChild | .firstElementChild |
最后一个 | .lastChild | .lastElementChild |
前一个 | .previousSibling | .previousElementSibling |
后一个 | .nextSibling | .nextElementSibling |
长度 | .childNodes.length | .childElementCount |
这些属性扩展了已有的DOM规范(而且,说实话,这些属性应该一早就出现在规范中的)。
很明显有个属性被漏掉了:.childElements(与.childNodes对应)。这个属性(包含DOM元素中的所有子元素)在规范的某个版本中是存在的,后来被砍掉了。
所幸的是,目前IE、Opera和Safari都支持一个.children的属性,它所提供的功能是.childElements的超集。在Firefox 3.5中支持元素遍历API的时候,这个属性.children也被包括在内。也就是说,所有主流的浏览器都支持这个属性了(比所有浏览器都支持元素遍历API中剩下的部分要早得多)。
下面是一些元素遍历API和.children的示例:
当点击的时候显示下一个元素:
someElement.addEventListener("click", function(){ this.nextSiblingElement.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实现了这个API。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的最佳方式是遍历常用的节点,如注释和文本节点。由于已经有不少的API来进行DOM元素的遍历(如getElementsByTagName),NodeIterator API可以作为一般的节点遍历方式的良好补充。