Element Traversal规范详解：跨浏览器DOM元素遍历新方法

Element Traversal规范概述

支持Element Traversal规范的浏览器包括IE 9及以上版本、Firefox 3.5及以上版本、Safari 4及以上版本、Chrome以及Opera 10及以上版本。

在处理元素之间的空白节点时，IE9之前的浏览器不会将其识别为文档节点，而其他所有主流浏览器则会返回文档节点。

为了兼容各浏览器之间的这种差异，同时不改变现有的DOM标准，W3C制定了Element Traversal规范。

新增的5个属性

该规范为DOM元素新增了5个属性。

这5个属性分别是：childElementCount、firstElementChild、lastElementChild、previousElementSibling和nextElementSibling。

详细官方文档地址：http://www.w3.org/TR/ElementTraversal/

针对元素间的空白节点，IE9之前的版本不会返回文本节点，而其他浏览器会将空格视为文本节点返回。这导致在使用childNodes和firstChild属性时行为不一致。为了弥补这一差异并保持DOM规范不变，W3C Element Traversal规范定义了一组新属性。

Element Traversal API为DOM元素添加了以下5个属性：

• childElementCount：返回子元素的数量（不包括文本节点和注释节点）。
• firstElementChild：指向第一个子元素。
• lastElementChild：指向最后一个子元素。
• previousElementSibling：指向前一个兄弟元素。
• nextElementSibling：指向后一个兄弟元素。

支持Element Traversal规范的浏览器为DOM元素添加了这些属性。利用这些属性，开发者无需担心空白文本节点的影响，从而可以非常便捷地查找DOM元素。

代码示例对比

以下是一个示例。在过去，若要跨浏览器遍历某个元素的所有子元素，需要编写如下代码：

var i,len,child = element.firstChild;
while(child != element.lastChild){
 if(child.nodeType == 1){
  processChild(child);
 }
 child = child.nextSibling;
}

而使用Element Traversal新增的属性后，代码变得非常简洁：

var i,len,child = element.firstElementChild;
while(child != element.lastElementChild){
 processChild(child);
 child = child.nextElementSibling;
}

支持Element Traversal规范的浏览器有：IE9+，Firfox3.5+，Safari4+，Chrome和Opera10+。