JavaScript遍歷DOM元素的常見方式示例
本文實例講述了JavaScript遍歷DOM元素的常見方式。分享給大家供大家參考，具體如下：
對于元素之間的空格，IE9以及之前的版本不會返回文本節(jié)點，，其他的瀏覽器會返回文本節(jié)點，所以我們在使用firstChild,lastChild時會導(dǎo)致行為不一致。
DOM中為元素新增了下面幾個屬性：
childElementCount：返回子元素（不包括文本節(jié)點和注釋）的數(shù)量；
firstElementChild：firstChild的元素版；
lastElementChild：lastChild的元素版;
previousElementSibling和nextElementSibling對應(yīng)著previousSibling，nextSibling的元素版
假設(shè)html如下，我們想遍歷出div中的所有元素節(jié)點:
一般來說，區(qū)別元素節(jié)點，屬性節(jié)點，文本節(jié)點的通用方式是判斷該節(jié)點的nodeType。
常見的幾種nodeType:
元素節(jié)點：1，
屬性節(jié)點：2，
文本節(jié)點：3，
注釋節(jié)點：8，
……
<div id="list"> <p>hello</p> <span>world</span> <em>cookieParse()</em> </div>
方式1：用firstChild，lastChild進(jìn)行元素遍歷:
var list = document.getElementById('list');
var child = list.firstChild;
console.log(list.nextSibling)
while(child != list.lastChild){
if(child.nodeType == 1){
console.log( child );
}
child = child.nextSibling;
}
使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼，可得如下運行結(jié)果：
方式2：使用firstElementChild，nextElementSibling
var list = document.getElementById('list');
var child = list.firstElementChild;
while(child){
console.log( child );
child = child.nextElementSibling;
}
使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼，可得如下運行結(jié)果：
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯誤與調(diào)試技巧總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
js核心基礎(chǔ)之構(gòu)造函數(shù)constructor用法實例分析
這篇文章主要介紹了js核心基礎(chǔ)之構(gòu)造函數(shù)constructor用法,結(jié)合具體實例形式分析了javascript構(gòu)造函數(shù)constructor概念、原理、使用方法及相關(guān)操作注意事項,需要的朋友可以參考下2019-05-05
web-view是小程序提供的一個可以直連h5頁面的組件,只要傳遞一個h5頁面的地址,就可以在小程序里直接打開預(yù)覽該h5頁面,這篇文章主要給大家介紹了微信小程序webView嵌入H5的相關(guān)資料,需要的朋友可以參考下2021-07-07
頁面的日期格式是：YYYY-MM-DD，而數(shù)據(jù)庫中的日期格式是：YYYYMMDD，兩者之間需要轉(zhuǎn)換一下，本文利用正則表達(dá)式去掉-2014-06-06
原生javascript實現(xiàn)讀寫CSS樣式的方法詳解
最近學(xué)習(xí)中遇到這個問題，為了日后方便查詢，本人翻閱了一些資料總結(jié)了以下方法，僅限原生JS，如有不對的地方歡迎指出！只求大家看完覺得有學(xué)到點什么就OK了！下面這篇文章主要介紹了利用原生javascript實現(xiàn)讀寫CSS樣式的方法,需要的朋友可以參考下。2017-02-02
神級程序員JavaScript300行代碼搞定漢字轉(zhuǎn)拼音
這篇文章主要介紹了神級程序員JavaScript300行代碼搞定漢字轉(zhuǎn)拼音,需要的朋友可以參考下2017-05-05
javascript實現(xiàn)簡單飛機大戰(zhàn)小游戲
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)簡單飛機大戰(zhàn)小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
前端實現(xiàn)電子簽名(web、移動端)通用的實戰(zhàn)過程
電子簽名通俗來說就是通過技術(shù)手段實現(xiàn)在電子文檔上加載電子形式的簽名,下面這篇文章主要給大家介紹了關(guān)于前端實現(xiàn)電子簽名(web、移動端)通用的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
BootStrap創(chuàng)建響應(yīng)式導(dǎo)航條實例代碼
這篇文章主要介紹了BootStrap創(chuàng)建響應(yīng)式導(dǎo)航條實例代碼的相關(guān)資料,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了JavaScript時間復(fù)雜度和空間復(fù)雜度，時間復(fù)雜度和空間復(fù)雜度是衡量一個算法是否優(yōu)秀的標(biāo)準(zhǔn)，通常我們比較兩個算法時會用預(yù)先估算和事后統(tǒng)計，下文詳細(xì)介紹，需要的朋友可以參考一下2022-07-07
這篇文章主要介紹了JSON遍歷方式,結(jié)合實例形式總結(jié)分析了JavaScript操作json實現(xiàn)遍歷的常用技巧,并給出了實例總結(jié),需要的朋友可以參考下2015-12-12