JS遍历DOM文档树的方法实例详解

2019-11-19 14:04:10

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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>

四运行结果