时间:2021-05-26
本文实例讲述了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数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了jQuery--遍历操作。分享给大家供大家参考,具体如下:jQuery--遍历【后代】向下遍历DOM树下面是两个用于向下遍历DOM树的jQuery
C++遍历二叉树实例详解2叉数又叫红黑树,关于2叉数的遍历问题,有很多,一般有三种常用遍历方法:(1)前序遍历(2)中序遍历(3)后续遍历以下是经典示例:#in
1.DOM:文档对象模型DOM(DocumentObjectModel)定义访问和处理HTML文档的标准方法。DOM将HTML文档呈现为带有元素、属性和文本的树
本文实例讲述了PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法。分享给大家供大家参考,具体如下:先来看看前序遍历、中序遍历与后序遍历原理图:根据树的前
DOM(DocumentObjectModle)操作文档的编程接口DOM定义了表示和修改文档的方法,不能修改css样式表,在js中使用DOM方法改变元素的css