本文实例讲述了 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>
四 运行结果
更多关于 JavaScript 相关内容感兴趣的读者可查看本站专题:JavaScript 操作 DOM 技巧总结,JavaScript 错误与调试技巧总结,JavaScript 数据结构与算法技巧总结,JavaScript 遍历算法与技巧总结及JavaScript 数学运算用法总结
来源: http://www.jb51.net/article/137678.htm