《JS高程（3）》DOM扩展-元素遍历-第11章笔记(19)

原创于 2017-02-08 15:21:22 发布 · 425 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#api #遍历 #dom

JavaScript 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了ElementTraversal API新增的五个属性：childElementCount、firstElementChild、lastElementChild、previousElementSibling和nextElementSibling，这些属性使开发者能够更高效地遍历DOM元素，避免处理空白文本节点。

元素遍历

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

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

利用这些元素不必担心空白文本节点，从而可以更方便地查找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;
}