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