遍历DOM文档树

╰半夏微凉° 2022-05-12 00:14 235阅读 0赞

**一 介绍**

遍历文档树通过使用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="父节点" οnclick="txt=nodeS(txt,'parent');"/>
    <input type="button" value="第一个子节点" οnclick="txt=nodeS(txt,'firstChild');"/>
    <input type="button" value="最后一个子节点" οnclick="txt=nodeS(txt,'lastChild');"/><br>
    <input name="button" type="button" οnclick="txt=nodeS(txt,'previousSibling');" value="前一个兄弟节点"/>
    <input type="button" value="最后一个兄弟节点" οnclick="txt=nodeS(txt,'nextSibling');"/>
    <input type="button" value="返回根节点" οnclick="txt=document.documentElement;txtUpdate(txt);"/>
    </form>
    <script language="javascript">
    
    </script>
    </body>

** **

四 运行结果

![f84723d3-37b2-3d94-9037-0d5647075bd8.png][]

[f84723d3-37b2-3d94-9037-0d5647075bd8.png]: /images/20220512/ac8ed67c97f849de8ca341e8680cdcca.png