JS遍歷DOM樹詳細介紹
這次帶給大家JS遍歷DOM樹詳細介紹，使用JS遍歷DOM樹的注意事項有哪些，下面就是實戰案例，一起來看一下。
一 介紹
遍歷文件樹透過使用parentNode屬性、firstChild屬性、lastChild屬性、previousSibling屬性和nextSibling屬性來實現。
1、parentNode屬性
該屬性傳回目前節點的父節點。
[pNode=]obj.parentNode
pNode：此參數用來儲存父節點，如果不存在父節點將傳回「null」。
2、firstChild屬性
此屬性傳回目前節點的第一個子節點。
[cNode=]obj.firstChild
cNode：此參數用來儲存第一個子節點，如果不存在將傳回「null」。
3、lastChild屬性
該屬性傳回目前節點的最後一個子節點。
[cNode=]obj.lastChild
cNode：此參數用來儲存最後一個子節點，如果不存在將傳回「null」。
4、previousSibling屬性
該屬性傳回目前節點的前一個兄弟節點。
[sNode=]obj.previousSibling
sNode：此參數用來儲存前一個兄弟節點，如果不存在將傳回「null」。
5、nextSibling屬性
此屬性傳回目前節點的後一個兄弟節點。
[sNode=]obj.nextSibling
sNode：此參數用來儲存後一個兄弟節點，如果不存在將傳回「null」。
二應用
遍歷文檔樹，在頁面中，透過對應的按鈕可以查找到文檔的各個節點的名稱、類型和節點值。
三程式碼
<head>
<title>遍历文档树</title>
</head>
<body >
<h3 id="h1">三号标题</h3>
<b>加粗内容</b>
<form name="frm" action="#" method="get">
节点名称：<input type="text" id="na"/><br />
节点类型：<input type="text" id="ty"/><br />
节点的值：<input type="text" id="va"/><br />
<input type="button" value="父节点" onclick="txt=nodeS(txt,'parent');"/>
<input type="button" value="第一个子节点" onclick="txt=nodeS(txt,'firstChild');"/>
<input type="button" value="最后一个子节点" onclick="txt=nodeS(txt,'lastChild');"/><br>
<input name="button" type="button" onclick="txt=nodeS(txt,'previousSibling');" value="前一个兄弟节点"/>
<input type="button" value="最后一个兄弟节点" onclick="txt=nodeS(txt,'nextSibling');"/>
<input type="button" value="返回根节点" 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("无兄弟节点");
break;
case"nextSibling":
if(txt.nextSibling)
{
txt=txt.nextSibling;
}
else
alert("无兄弟节点");
break;
case"parent":
if(txt.parentNode)
{
txt=txt.parentNode;
}
else
alert("无父节点");
break;
case"firstChild":
if(txt.hasChildNodes())
{
txt=txt.firstChild;
}
else
alert("无子节点");
break;
case"lastChild":
if(txt.hasChildNodes())
{
txt=txt.lastChild;
}
else
alert("无子节点")
break;
}
txtUpdate(txt);
return txt;
}
var txt=document.documentElement;
txtUpdate(txt);
-->
</script>
</body>#四運行結果
#相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
# #####以上是JS遍歷DOM樹詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
wapi是什麼東西詳細介紹
Jan 07, 2024 pm 09:14 PM
wapi這個名詞使用者可能在使用網路得時候見過過，但是對於一部分人來說肯定都不知道wapi是什麼，下面就帶來了詳細介紹，幫助不知道小伙伴去了解。 wapi是什麼東西：答：wapi是無線區域網路鑑別和保密的基礎架構。這就像紅外線和藍牙等功能一樣，一般都覆蓋在辦公大樓等地方的附近。基本上都是為一個小部門所有的，所以這個功能涉及的範圍只有幾公里。 wapi相關介紹：1、wapi是無線區域網路裡面的一種傳輸協定。 2.這款技術是可以去避免窄頻帶通訊的問題，可以更好的去進行傳播。 3.只要只需要一個代碼就可以去傳送訊號了
詳解win11能否運行PUBG遊戲
Jan 06, 2024 pm 07:17 PM
pubg又稱絕地求生，是一款非常經典的射擊大逃殺類型遊戲，從2016年火爆以來一直擁有非常多的玩家。在最近的win11系統推出後，就有不少玩家想要在win11上游玩它，下面就跟著小編來看看win11是否可以玩pubg吧。 win11能玩pubg嗎：答：win11可以玩pubg。 1.在win11推出之初，因為win11需要開啟tpm的緣故，所以導致很多玩家被pubg封號處理了。 2.不過後來根據玩家的回饋，藍洞方面已經解決了這個問題，目前已經可以在win11中正常玩pubg了。 3.如果大家遇到了pub
i5處理器是否能裝win11詳細介紹
Dec 27, 2023 pm 05:03 PM
i5是英特爾旗下的一系列處理器，擁有到現在11代i5的各種不同版本，每一代都有不同效能。因此對於i5處理器是否能夠安裝win11，還要看是第幾代的處理器，下面就跟著小編一起來分別了解一下吧。 i5處理器能裝win11嗎：答：i5處理器能裝win11。一、第八代及之後的i51、第八代及後續的i5處理器是能夠滿足微軟的最低配置需求的。 2.因此我們只需要進入微軟網站，下載一個「win11安裝助手」3、下載完成後，運行該安裝助手，根據提示進行操作就可以安裝win11了。二、第八代之前的i51、第八代之
介紹最新的Win 11聲音調法方法
Jan 08, 2024 pm 06:41 PM
很多用戶更新了最新的win11之後發現自己系統的聲音有了些許的變化，但是又不知道該怎麼去進行調整，所以今天本站就給你們帶來了電腦最新win11聲音調法介紹，操作不難而且選擇多樣，快來一起下載試試吧。電腦最新系統windows11聲音如何調1、先右鍵點選桌面右下角的聲音圖標，並選擇「播放設定」。 2、然後進入設定中點選播放列中的「揚聲器」。 3、隨後點選右下方的「屬性」。 4.點選屬性中的「增強」選項列。 5.此時如果「禁用所有聲音效果」前的√勾上了就把他取消。 6、之後就可以選擇下面的聲音效果來進行設定並點
簡易JavaScript教學：取得HTTP狀態碼的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest
什麼是狗狗幣
Apr 01, 2024 pm 04:46 PM
狗狗幣是一種基於網路迷因創建的加密貨幣，沒有固定的供應上限，交易時間快速，交易費用低，擁有龐大的迷因社群。用途包括小額交易、打賞和慈善捐贈。然而，其無限供應量、市場波動和作為笑話幣的地位也帶來風險和擔憂。什麼是狗狗幣？狗狗幣是一種基於網路迷因和笑話創建的加密貨幣。起源與歷史：2013年12月，兩位軟體工程師BillyMarkus和JacksonPalmer創立狗狗幣。靈感來自於當時流行的"Doge"模因，一個以一隻柴犬為特徵的滑稽照片加上破碎英語。特徵與優勢：無限供應量：與比特幣等其他加密貨
詳細介紹電腦中的印表機驅動程式位置
Jan 08, 2024 pm 03:29 PM
許多用戶在電腦上安裝了印表機驅動程序，但卻不知道如何找到它們。因此，今天我為大家帶來了詳細介紹印表機驅動程式在電腦中的位置，對於還不了解的用戶，快來看看吧印表機驅動在電腦哪裡找重新撰寫內容而不改變原義時，需要將語言改寫為中文，不需要出現原句首先，建議使用第三方軟體進行搜尋2、在右上角找到"工具箱"3、在下方找到並點選「裝置管理員」。改寫後的句子：3、在底部找到並點擊“裝置管理員”4、然後打開“列印佇列”，然後找到你的印表機裝置。此次是你的印表機名稱型號。 5.右鍵印表機設備，就能夠去更新或卸載我
PyCharm新手指南：取代功能全面解析
Feb 25, 2024 am 11:15 AM
PyCharm是一款功能強大的Python整合開發環境，具有豐富的功能與工具，能夠大幅提升開發效率。其中，替換功能是開發過程中常用的功能之一，能夠幫助開發者快速修改程式碼並提高程式碼品質。本文將詳細介紹PyCharm的替換功能，並結合具體的程式碼範例，幫助新手更好地掌握和使用該功能。替換功能簡介PyCharm的替換功能可以幫助開發者在程式碼中快速替換指定的文本
