JavaScript学习-DOM扩展_元素遍历

Zmarvin

于 2017-05-03 19:34:03 发布

阅读量299

点赞数

分类专栏： javascript 文章标签：扩展 ie 9 javascript 遍历浏览器

本文链接：https://blog.youkuaiyun.com/theroadofprogrammers/article/details/71142208

版权

javascript 专栏收录该内容

39 篇文章

订阅专栏

本文介绍了ElementTraversal规范，该规范提供了一组新属性来统一不同浏览器间处理元素子节点的行为差异。新增的属性如childElementCount、firstElementChild等，使得开发者能够更方便地遍历DOM树中的元素节点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，介绍

对于元素间的空格，IE9及之前的版本不会反悔文本节点，而其他所有浏览器都会返回文本节点。这样就导致了再使用childNodes和firstChild等属性时的行为不一致。为了弥补这一差异，而同时DOM规范不变，Element Traversal规范新定义了一组属性。

2，添加的5个属性

childElementCount:返回子元素（不包括文本节点和注释）的个数。
firstElementChild:指向第一个子元素；firstChild的元素版。
lastElementChild:指向最后一个子元素；lastChild的元素版。
previousElementSibing:指向前一个同辈元素；previousSibling的元素版。
nextElementSibling：指向后一个同辈元素；nextSibling的元素版。

3，代码示例

旧有的写法

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;
}