首頁 > 文章 > web前端 > JS如何遍歷DOM文檔樹

JS如何遍歷DOM文檔樹

php中世界最好的语言原創: 2018-04-08 13:59:161699瀏覽

這次帶給大家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,&#39;parent&#39;);"/>
<input type="button" value="第一个子节点" onclick="txt=nodeS(txt,&#39;firstChild&#39;);"/>
<input type="button" value="最后一个子节点" onclick="txt=nodeS(txt,&#39;lastChild&#39;);"/><br>
<input name="button" type="button" onclick="txt=nodeS(txt,&#39;previousSibling&#39;);" value="前一个兄弟节点"/>
<input type="button" value="最后一个兄弟节点" onclick="txt=nodeS(txt,&#39;nextSibling&#39;);"/>
<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中文網其它相關文章！

推薦閱讀：
react實作手機號碼的資料同步

babel怎麼轉換es6的class語法

######

以上是JS如何遍歷DOM文檔樹的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：react實現手機號的資料同步下一篇：react實現手機號的資料同步

看更多