欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS遍歷DOM文檔樹(shù)的方法實(shí)例詳解

 更新時(shí)間:2018年04月03日 14:25:35   作者:chengqiuming  
這篇文章主要介紹了JS遍歷DOM文檔樹(shù)的方法,結(jié)合實(shí)例形式分析了javascript遍歷dom文檔樹(shù)的相關(guān)方法與使用技巧,需要的朋友可以參考下

本文實(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ì)有所幫助。

相關(guān)文章

最新評(píng)論