js Element Traversal規(guī)范中的元素遍歷方法
支持Element Traversal 規(guī)范的瀏覽器有IE 9+、Firefox 3.5+、Safari 4+、Chrome 和Opera 10+。
對于元素間的空格,在IE9之前,都不會返回文檔節(jié)點,其它的所有瀏覽器都會返回文檔節(jié)點。
為了兼容瀏覽器這間的差異,又不更改已有的DOM 標準,所以有了 Element Traversal 規(guī)范。
這個規(guī)范為 元素增加了 5 個 屬性
childElementCount
firstElementChild
lastElementChild
previousElementSibling
nextElementSibling
詳細官方文檔; http://www.w3.org/TR/ElementTraversal/
對于元素間的空格,IE9以前的版本不會返回文本節(jié)點,而其他瀏覽器都會將空格當做是文本節(jié)點返回。這就導致了在使用childNodes和firstChild的屬性時行為的不一致。為了彌補這一差異,而同時又保持DOM規(guī)范的不變,W3C Element Traversal規(guī)范新定義了一組屬性。
Element Traversal API為DOM元素添加了下面5個屬性:
- childElementCount:返回子元素(不包括文本節(jié)點和注釋)的個數(shù)。
- firstElementChild:指向第一個子元素。
- lastElementChild:指向最后一個子元素。
- previousElementSibling:指向前一個同輩元素。
- nextElementSibling:指向后一個同輩元素。
支持的瀏覽器為DOM元素添加了這些屬性,利用這些元素不必擔心空白文本節(jié)點,從而可以非常方便的查找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規(guī)范的瀏覽器有:IE9+,F(xiàn)irfox3.5+,Safari4+,Chrome和Opera10+。
相關文章
ES6?數(shù)組some()和every()的使用及說明
這篇文章主要介紹了ES6?數(shù)組some()和every()的使用及說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-01-01javascript實現(xiàn)window.print()去除頁眉頁腳
這篇文章主要介紹了javascript實現(xiàn)window.print()去除頁眉頁腳的方法以及各參數(shù)的設置技巧,需要的朋友可以參考下2014-12-12