js之DOM元素遍历

对于元素间的空格,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;

}

猜你喜欢

转载自www.cnblogs.com/YKingcc/p/9112344.html