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
進行元素遍歷:
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原生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-05javascript實現(xiàn)簡單飛機大戰(zhàn)小游戲
這篇文章主要為大家詳細介紹了javascript實現(xiàn)簡單飛機大戰(zhàn)小游戲,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-05-05前端實現(xiàn)電子簽名(web、移動端)通用的實戰(zhàn)過程
電子簽名通俗來說就是通過技術(shù)手段實現(xiàn)在電子文檔上加載電子形式的簽名,下面這篇文章主要給大家介紹了關(guān)于前端實現(xiàn)電子簽名(web、移動端)通用的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12BootStrap創(chuàng)建響應(yīng)式導(dǎo)航條實例代碼
這篇文章主要介紹了BootStrap創(chuàng)建響應(yīng)式導(dǎo)航條實例代碼的相關(guān)資料,需要的朋友可以參考下2016-05-05