JS遍歷DOM文檔樹(shù)的方法實(shí)例詳解
本文實(shí)例講述了JS遍歷DOM文檔樹(shù)的方法。分享給大家供大家參考,具體如下:
一 介紹
遍歷文檔樹(shù)通過(guò)使用parentNode屬性、firstChild屬性、lastChild屬性、previousSibling屬性和nextSibling屬性來(lái)實(shí)現(xiàn)。
1、parentNode屬性
該屬性返回當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)。
[pNode=]obj.parentNode
pNode:該參數(shù)用來(lái)存儲(chǔ)父節(jié)點(diǎn),如果不存在父節(jié)點(diǎn)將返回“null”。
2、firstChild屬性
該屬性返回當(dāng)前節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)。
[cNode=]obj.firstChild
cNode:該參數(shù)用來(lái)存儲(chǔ)第一個(gè)子節(jié)點(diǎn),如果不存在將返回“null”。
3、lastChild屬性
該屬性返回當(dāng)前節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)。
[cNode=]obj.lastChild
cNode:該參數(shù)用來(lái)存儲(chǔ)最后一個(gè)子節(jié)點(diǎn),如果不存在將返回“null”。
4、previousSibling屬性
該屬性返回當(dāng)前節(jié)點(diǎn)的前一個(gè)兄弟節(jié)點(diǎn)。
[sNode=]obj.previousSibling
sNode:該參數(shù)用來(lái)存儲(chǔ)前一個(gè)兄弟節(jié)點(diǎn),如果不存在將返回“null”。
5、nextSibling屬性
該屬性返回當(dāng)前節(jié)點(diǎn)的后一個(gè)兄弟節(jié)點(diǎn)。
[sNode=]obj.nextSibling
sNode:該參數(shù)用來(lái)存儲(chǔ)后一個(gè)兄弟節(jié)點(diǎn),如果不存在將返回“null”。
二 應(yīng)用
遍歷文檔樹(shù),在頁(yè)面中,通過(guò)相應(yīng)的按鈕可以查找到文檔的各個(gè)節(jié)點(diǎn)的名稱、類型和節(jié)點(diǎn)值。
三 代碼
<head> <title>遍歷文檔樹(shù)</title> </head> <body > <h3 id="h1">三號(hào)標(biāo)題</h3> <b>加粗內(nèi)容</b> <form name="frm" action="#" method="get"> 節(jié)點(diǎn)名稱:<input type="text" id="na"/><br /> 節(jié)點(diǎn)類型:<input type="text" id="ty"/><br /> 節(jié)點(diǎn)的值:<input type="text" id="va"/><br /> <input type="button" value="父節(jié)點(diǎn)" onclick="txt=nodeS(txt,'parent');"/> <input type="button" value="第一個(gè)子節(jié)點(diǎn)" onclick="txt=nodeS(txt,'firstChild');"/> <input type="button" value="最后一個(gè)子節(jié)點(diǎn)" onclick="txt=nodeS(txt,'lastChild');"/><br> <input name="button" type="button" onclick="txt=nodeS(txt,'previousSibling');" value="前一個(gè)兄弟節(jié)點(diǎn)"/> <input type="button" value="最后一個(gè)兄弟節(jié)點(diǎn)" onclick="txt=nodeS(txt,'nextSibling');"/> <input type="button" value="返回根節(jié)點(diǎn)" onclick="txt=document.documentElement;txtUpdate(txt);"/> </form> <script language="javascript"> <!-- function txtUpdate(txt) { window.document.frm.na.value=txt.nodeName; window.document.frm.ty.value=txt.nodeType; window.document.frm.va.value=txt.nodeValue; } function nodeS(txt,nodeName) { switch(nodeName) { case"previousSibling": if(txt.previousSibling) { txt=txt.previousSibling; } else alert("無(wú)兄弟節(jié)點(diǎn)"); break; case"nextSibling": if(txt.nextSibling) { txt=txt.nextSibling; } else alert("無(wú)兄弟節(jié)點(diǎn)"); break; case"parent": if(txt.parentNode) { txt=txt.parentNode; } else alert("無(wú)父節(jié)點(diǎn)"); break; case"firstChild": if(txt.hasChildNodes()) { txt=txt.firstChild; } else alert("無(wú)子節(jié)點(diǎn)"); break; case"lastChild": if(txt.hasChildNodes()) { txt=txt.lastChild; } else alert("無(wú)子節(jié)點(diǎn)") break; } txtUpdate(txt); return txt; } var txt=document.documentElement; txtUpdate(txt); --> </script> </body>
四 運(yùn)行結(jié)果
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript操作DOM技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- js 索引下標(biāo)之li集合綁定點(diǎn)擊事件
- JS遍歷ul下的li點(diǎn)擊彈出li的索引的實(shí)現(xiàn)方法
- JS數(shù)組操作(數(shù)組增加、刪除、翻轉(zhuǎn)、轉(zhuǎn)字符串、取索引、截取(切片)slice、剪接splice、數(shù)組合并)
- 用javascript為DropDownList控件下拉式選擇添加一個(gè)Item至定義索引位置
- JavaScript遍歷DOM元素的常見(jiàn)方式示例
- JavaScript實(shí)現(xiàn)的DOM樹(shù)遍歷方法詳解【二叉DOM樹(shù)、多叉DOM樹(shù)】
- javascript先序遍歷DOM樹(shù)的方法
- JavaScript簡(jiǎn)單遍歷DOM對(duì)象所有屬性的實(shí)現(xiàn)方法
- JS實(shí)現(xiàn)點(diǎn)擊li標(biāo)簽彈出對(duì)應(yīng)的索引功能【案例】
相關(guān)文章
發(fā)兩個(gè)小東西,ASP/PHP 學(xué)習(xí)工具。 用JavaScript寫(xiě)的
發(fā)兩個(gè)小東西,ASP/PHP 學(xué)習(xí)工具。 用JavaScript寫(xiě)的...2007-04-04非常實(shí)用的js驗(yàn)證框架實(shí)現(xiàn)源碼 附原理方法
這篇文章主要為大家詳細(xì)介紹了一個(gè)非常實(shí)用的js驗(yàn)證框架實(shí)現(xiàn)源碼,并附原理方法,感興趣的小伙伴們可以參考一下2016-06-06JavaScript 九種跨域方式實(shí)現(xiàn)原理
這篇文章主要介紹了JavaScript 九種跨域方式實(shí)現(xiàn)原理,什么是跨域,以及有哪幾種跨域方式,這是本文要探討的內(nèi)容。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02通過(guò)修改360搶票的刷新頻率和突破8車次限制實(shí)現(xiàn)方法
這篇文章主要介紹了通過(guò)修改360搶票的刷新頻率和突破8車次限制實(shí)現(xiàn)方法的相關(guān)資料,現(xiàn)在刷票工具很多,這里就舉一例修改,增加搶票頻率及突破8車次限制,需要的朋友可以參考下2017-01-01JS函數(shù)多個(gè)參數(shù)默認(rèn)值指定方法分析
這篇文章主要介紹了JS函數(shù)多個(gè)參數(shù)默認(rèn)值指定方法,結(jié)合實(shí)例形式分析了javascript函數(shù)參數(shù)的定義與傳遞相關(guān)操作技巧,需要的朋友可以參考下2016-11-11Promise.race和Promise.any使用示例詳解
這篇文章主要為大家介紹了如何使用Promise.race() 和 Promise.any() 示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11如何使用webpack5+TypeScript+npm發(fā)布組件庫(kù)
這篇文章主要介紹了如何使用webpack5+TypeScript+npm發(fā)布組件庫(kù),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-04-04Spring Boot+AngularJS+BootStrap實(shí)現(xiàn)進(jìn)度條示例代碼
一般上傳文件時(shí)都需要進(jìn)度條,本篇文章主要介紹了Spring Boot+AngularJS+BootStrap實(shí)現(xiàn)進(jìn)度條示例代碼,有興趣的可以了解一下。2017-03-03