js如何進行元素遍歷

這次帶給大家js如何進行元素遍歷，js進行元素遍歷的注意事項有哪些，以下就是實戰案例，一起來看一下。

支援Element Traversal 規範的瀏覽器有IE 9 、Firefox 3.5 、Safari 4 、Chrome 和Opera 10 。

對於元素間的空格，在IE9之前，都不會傳回文檔節點，其它的所有瀏覽器都會傳回文檔節點。

為了相容瀏覽器這間的差異，又不更改已有的DOM 標準，所以有了 Element Traversal 規範。

這個規範為元素增加了5 個屬性

childElementCount
firstElementChild
lastElementChild
previousElementSibling
nextElementSibling

詳細官方文件; http: //www.w3.org/TR/ElementTraversal/

對於元素間的空格，IE9先前的版本不會傳回文字節點，而其他瀏覽器都會將空格當作文字節點傳回。這就導致了使用childNodes和firstChild的屬性時行為的不一致。為了彌補這一差異，同時又維持DOM規範的不變，W3C Element Traversal規範新定義了一組屬性。

Element Traversal API為DOM元素新增了下面5個屬性：

• childElementCount：傳回子元素（不包括文字節點和註解）的個數。

• firstElementChild：指向第一個子元素。

• lastElementChild：指向最後一個子元素。

• previousElementSibling：指向前一個同儕元素。

• nextElementSibling：指向後一個同儕元素。

支援的瀏覽器為DOM元素添加了這些屬性，利用這些元素不必擔心空白文字節點，從而可以非常方便的查找DOM元素了。

下面是一個範例。在以前，要跨瀏覽器遍歷某個元素的所有子元素時，需要像下面這樣編寫程式碼：

var i,len,child = element.firstChild;
while(child != element.lastChild){
 if(child.nodeType == 1){
  processChild(child);
 }
 child = child.nextSibling;
}

而使用Element Traversal新增的屬性，程式碼就會變得非常簡潔：

var i,len,child = element.firstElementChild;
while(child != element.lastElementChild){
 processChild(child);
 child = child.nextElementSibling;
}

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

如何操作Vue做出proxy代理

#vue中v-cloak載入時閃爍如何處理

#

以上是js如何進行元素遍歷的詳細內容。更多資訊請關注PHP中文網其他相關文章！