Firefox 3.5 包含对两个 W3C DOM 遍历规范的新支持。第一个是 元素遍历 API,专注于使逐元素遍历更容易,第二个是 NodeIterator 接口,它使查找所有节点类型变得更加容易。
元素遍历 API
元素遍历 API 的目的是使开发人员更容易遍历 DOM 元素,而不必担心中间文本节点、注释节点等。这长期以来一直是网页开发人员的难题,特别是对于像 document.documentElement.firstChild
这样的情况,它会根据文档的空格结构产生不同的结果。
元素遍历 API 引入了一些 新的 DOM 节点属性,可以使此遍历变得更加简单。
以下是现有 DOM 节点属性及其新对应项的完整分解。
目的 | 所有 DOM 节点 | 仅 DOM 元素 |
---|---|---|
第一个 | .firstChild | .firstElementChild |
最后一个 | .lastChild | .lastElementChild |
上一个 | .previousSibling | .previousElementSibling |
下一个 | .nextSibling | .nextElementSibling |
长度 | .childNodes.length | .childElementCount |
这些属性为 DOM 规范提供了一个相当简单的补充(老实说,它们本来就应该在规范中)。
但是,有一个属性明显缺失:.childElements
(作为 .childNodes
的对应项)。此属性(包含 DOM 元素子元素的实时 NodeSet)在规范的先前版本中,但似乎在一段时间内被裁剪掉了。
但并非全无希望。目前,Internet Explorer、Opera 和 Safari 都支持 .children
属性,它提供了原本应该由 .childElements
实现的功能的超集。当对元素遍历 API 的支持最终登陆 Firefox 3.5 时,对 .children
的支持也包含在内。这意味着每个主要浏览器现在都支持此属性(远远早于所有浏览器支持其他真正元素遍历规范)。
元素遍历 API(和 .children
)的一些实际应用示例
单击时显示下一个元素
someElement.addEventListener("click", function(){
this.nextSiblingElement.style.display = "block";
}, false);
为所有子元素添加类
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 最好的用法是在遍历常用的(但难以遍历的)节点(如注释和文本节点)上。由于已经存在一些用于遍历 DOM 元素的 API(例如 getElementsByTagName
),因此这确实为节点遍历的常规方法提供了受欢迎的喘息机会。
12 个评论