js Element Traversal規(guī)范中的元素遍歷方法
支持Element Traversal 規(guī)范的瀏覽器有IE 9+、Firefox 3.5+、Safari 4+、Chrome 和Opera 10+。
對(duì)于元素間的空格，在IE9之前，都不會(huì)返回文檔節(jié)點(diǎn)，其它的所有瀏覽器都會(huì)返回文檔節(jié)點(diǎn)。
為了兼容瀏覽器這間的差異，又不更改已有的DOM 標(biāo)準(zhǔn)，所以有了 Element Traversal 規(guī)范。
這個(gè)規(guī)范為 元素增加了 5 個(gè) 屬性
childElementCount
firstElementChild
lastElementChild
previousElementSibling
nextElementSibling
詳細(xì)官方文檔; http://www.w3.org/TR/ElementTraversal/
對(duì)于元素間的空格，IE9以前的版本不會(huì)返回文本節(jié)點(diǎn)，而其他瀏覽器都會(huì)將空格當(dāng)做是文本節(jié)點(diǎn)返回。這就導(dǎo)致了在使用childNodes和firstChild的屬性時(shí)行為的不一致。為了彌補(bǔ)這一差異，而同時(shí)又保持DOM規(guī)范的不變，W3C Element Traversal規(guī)范新定義了一組屬性。
Element Traversal API為DOM元素添加了下面5個(gè)屬性：
- childElementCount：返回子元素（不包括文本節(jié)點(diǎn)和注釋）的個(gè)數(shù)。
- firstElementChild：指向第一個(gè)子元素。
- lastElementChild：指向最后一個(gè)子元素。
- previousElementSibling：指向前一個(gè)同輩元素。
- nextElementSibling：指向后一個(gè)同輩元素。
支持的瀏覽器為DOM元素添加了這些屬性，利用這些元素不必?fù)?dān)心空白文本節(jié)點(diǎn)，從而可以非常方便的查找DOM元素了。
下面是一個(gè)示例。在以前，要跨瀏覽器遍歷某個(gè)元素的所有子元素時(shí)，需要像下面這樣編寫代碼：
var i,len,child = element.firstChild;
while(child != element.lastChild){
if(child.nodeType == 1){
processChild(child);
}
child = child.nextSibling;
}
而使用Element Traversal新增的屬性，代碼就會(huì)變得非常簡潔：
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+。
相關(guān)文章
JavaScript隊(duì)列數(shù)據(jù)結(jié)構(gòu)詳解
這篇文章主要介紹了JavaScript隊(duì)列數(shù)據(jù)結(jié)構(gòu)詳解，隊(duì)列是一種先進(jìn)先出的數(shù)據(jù)結(jié)構(gòu)，隊(duì)列中允許兩種基礎(chǔ)操作，也就是插入和刪除，也就是入隊(duì)和出隊(duì)2022-07-07
在JavaScript中添加css樣式(js追加類)代碼示例
這篇文章主要給大家介紹了關(guān)于在JavaScript中如何添加css樣式,也就是js追加類的相關(guān)資料,JavaScript是一種廣泛應(yīng)用于互聯(lián)網(wǎng)開發(fā)的編程語言,它能夠幫助網(wǎng)頁實(shí)現(xiàn)動(dòng)態(tài)效果和交互性,需要的朋友可以參考下2024-01-01
JS實(shí)現(xiàn)簡單的天數(shù)計(jì)算器完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)簡單的天數(shù)計(jì)算器,結(jié)合完整實(shí)例形式分析了javascript針對(duì)日期的獲取及天數(shù)運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了JavaScript?管道運(yùn)算符,管道運(yùn)算符為我們的代碼添加了大量上下文，并簡化了操作，以便以后可以擴(kuò)展它們，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-05-05
這篇文章主要給大家介紹了關(guān)于微信小程序新手教程之啟動(dòng)頁重要性的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了js實(shí)現(xiàn)仿百度瀑布流的方法,以完整實(shí)例形式分析了js仿百度瀑布流的相關(guān)樣式與實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了JS正則子匹配用法,結(jié)合簡單實(shí)例形式分析了js正則字匹配的概念、用法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-12-12
JS獲取數(shù)組中出現(xiàn)次數(shù)最多及第二多元素的方法
這篇文章主要介紹了JS獲取數(shù)組中出現(xiàn)次數(shù)最多及第二多元素的方法,涉及javascript針對(duì)數(shù)組的遍歷、排序、判斷、查詢等相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
JavaScript Promise原理與實(shí)現(xiàn)刨析
首先呢，Promise是異步中比較重要的知識(shí)點(diǎn)，學(xué)習(xí)的最好方法就是掌握它的基本原理。所以這一篇主要說一下如何用JS來實(shí)現(xiàn)一個(gè)自己的promise2022-10-10
json經(jīng)常使用，但如果字段中出現(xiàn)換行符如何處理，測(cè)試一下json類的處理，也沒有發(fā)現(xiàn)。想不到最終的處理確實(shí)如此簡單2014-06-06