js之DOM元素遍历

Posted 2020-11-09 YKing_匆

对于元素间的空格，IE9之前的版本不会返回文本节点，而且他所有浏览器都会返回文本节点。这样就导致

使用childNodes和firstChild等属性时的行为不一致。从而有了Element Traversal API 为DOM元素添加额以下5个元素：

chaildElementCount:返回子元素（不包括文本节点和注释）的个数

firstElementChild:指向第一个子元素

lastElementChild:指向最后一个子元素

previousElementSilbing:指向前一个同辈元素

nextElementSibling:指向后一个同辈元素

 

下面来看一个例子：过去，要跨浏览器遍历某个元素的所有子元素，需要下面的代码：

var i,len,child = element.firstChild;

while(child!=element.lastChild){

　　if(child.nodeType == 1){ //检查是不是元素类型

　　　　　...

　　}

　　child = child.nextSibling;

}

而现在使用Element Traversal新增元素，可以这样：

var i,len,child = element.firstElementChild;

while(child!=element.lastElementChild){

　　.....

　　child = child.nextSibling;

}