溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

js Element Traversal規范中的元素遍歷方法

發布時間:2020-09-22 11:37:37 來源:腳本之家 閱讀:202 作者:mdxy-dxy 欄目:web開發

支持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;
}

支持Element Traversal規范的瀏覽器有:IE9+,Firfox3.5+,Safari4+,Chrome和Opera10+。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女