Javascript高级编程学习笔记（47）—— 元素遍历

元素遍历

为了方便我们使用JS来遍历文档中的元素，W3C在原来的基础之上提出了 Element Traversal 规范

这一规范主要就是为了统一浏览器对文档中节点解析不一致的问题。

比如在某些浏览器中元素之间的空格会被解析为文本节点

而有些浏览器的的行为又有所区别，所以为了弱化这些差异，JS就为DOM元素提供了以下属性：

 

1.、childElementCount：返回子元素的个数，不包括文本、注释节点

2、firstElementChild：指向第一个子元素（firstChild返回第一个节点）

3、lastElementChild：指向最后一个子元素（lastChild指向最后一个节点）

4、previousElementSibling：指向前一个同级元素

5、nextElementSibling：指向后一个同级元素

 

当我们不使用 Element Traversal 来遍历某个元素的子节点

var child = element.firstChild;

while(child != element.lastChild){
    if(child.nodeType === 1){// 判断当前节点是否为元素节点
        // code
    }
    child = child.nextSibling;
}

使用Element Traversal

var child = element.firstElementChild;

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