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


Posted in Javascript onApril 03, 2018

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

四 运行结果

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

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
一些常用的JavaScript函数(json)附详细说明
May 25 Javascript
Document:getElementsByName()使用方法及示例
Oct 28 Javascript
js实现连个数字相加而不是拼接的方法
Feb 23 Javascript
JavaScript 里的类数组对象
Apr 08 Javascript
JavaScript中的this,call,apply使用及区别详解
Jan 29 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
Nov 05 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
May 09 Javascript
js实现京东轮播图效果
Jun 30 Javascript
微信小程序methods中定义的方法互相调用的实例代码
Aug 07 Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 Javascript
JavaScript实现移动端拖动元素
Nov 24 Javascript
关于Javascript闭包与应用的详解
Apr 22 Javascript
JavaScript同源策略和跨域访问实例详解
Apr 03 #Javascript
vue 组件中slot插口的具体用法
Apr 03 #Javascript
react 实现页面代码分割、按需加载的方法
Apr 03 #Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 #Javascript
使用FileReader API创建Vue文件阅读器组件
Apr 03 #Javascript
vue内置指令详解
Apr 03 #Javascript
详解在React里使用&quot;Vuex&quot;
Apr 02 #Javascript
You might like
PHP取整数函数常用的四种方法小结
2012/07/05 PHP
深入PHP nl2br()格式化输出的详解
2013/06/05 PHP
两千行代码的PHP学习笔记汇总
2014/10/05 PHP
微信公众号点击菜单即可打开并登录微站的实现方法
2014/11/14 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
JavaScript数组对象赋值用法实例
2015/08/04 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
JavaScript实现数据类型的相互转换
2016/03/06 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
javascript中神奇的 Date对象小结
2017/10/12 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
2017/12/19 Javascript
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
2019/11/29 Javascript
[56:45]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第一局
2016/02/28 DOTA
Python实现简单过滤文本段的方法
2017/05/24 Python
python利用有道翻译实现&quot;语言翻译器&quot;的功能实例
2017/11/14 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
详解一种用django_cache实现分布式锁的方式
2019/09/01 Python
python多进程 主进程和子进程间共享和不共享全局变量实例
2020/04/25 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
日期和时间问题
2015/01/04 面试题
市场专员岗位职责
2014/02/14 职场文书
秋天的图画教学反思
2014/05/01 职场文书
师德师风自我剖析材料
2014/09/27 职场文书
开展党的群众路线教育实践活动总结报告
2014/10/31 职场文书
幼师小班个人总结
2015/02/12 职场文书
写给老师的保证书
2015/05/09 职场文书
微信搭讪开场白
2015/05/28 职场文书
应届毕业生的自我评价
2019/06/21 职场文书