這次帶給大家 Element Traversal實現元素遍歷詳解, Element Traversal實現元素遍歷的注意事項有哪些,下面就是實戰案例,一起來看一下。
對於元素間的空格,在IE9之前,都不會傳回文檔節點,其它的所有瀏覽器都會傳回文檔節點。
為了相容瀏覽器這間的差異,又不更改已有的DOM 標準,所以有了 Element Traversal 規範。
這個規範為元素增加了5 個屬性
childElementCount firstElementChild lastElementChild previousElementSibling nextElementSibling
對於元素間的空格,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; }
支援Element Traversal規範的瀏覽器有:IE9 ,Firfox3.5 ,Safari4 ,Chrome和Opera10 。
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是Element Traversal實現元素遍歷詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!