1. 程式人生 > >js之DOM元素遍歷

js之DOM元素遍歷

nodes 之前 節點和 HA 第一個 AI 屬性 TE 文本節點

對於元素間的空格,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;

}

js之DOM元素遍歷