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