DOM扩展-元素遍历

2019, May 30 mannuan One min read

Table of Contents

使用循环语句进行常规遍历的不方便性：

元素间的空格(空行)的对待方式不一致，除IE9-外的浏览器都视作文本节点，所以未使用新API之前遍历元素都需要检测节点的类型，跳开空格（空行）代表文本节点。

W3C的Element Traversal规范新定义了一组属性：IE9+支持：

childElementCount: 子元素节点的个数；
firstElementChild: 第一个子元素节点；
lastElementChild: 最后一个子元素节点；
previousElementSibling: 后一个元素节点

旧的写法：

var i,
    len,
    child = element.firstChild;

while(child != element.lastChild){
    if(child.nodeType == 1){  // 检查是不是元素
        processChild(child);
    }
    child = child.nextSubling;
}

新API下的写法：

var i,
    len,
    child = element.firstElementChild;

while(child != element.lastElementChild){
    processChild(child);
    child = child.nextElementSibling;
}