这次给大家带来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中文网其它相关文章!

推荐阅读:

Vue项目中怎么引用验证码