js遍历DOM树(注释+流程)

最新推荐文章于 2022-11-29 10:03:33 发布

InLett_杨捷

最新推荐文章于 2022-11-29 10:03:33 发布

阅读量419

点赞数

本文链接：https://blog.csdn.net/InLett_yj/article/details/100191238

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<div>
		<div>
			<p></p>
			<span></span>
		</div>
		<ul>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
		</ul>
	</div>
	<body>
		<script type="text/javascript">
			//获取页面的根节点
			var root=document.documentElement  //HTML   整个页面默认的所有DOM节点
			//封装一个函数用来,用来获取DOM树的节点名称
			function forDOM(root1){
				//获取根节点的子节点
		       var children=root1.children;
		       //调用遍历所有子节点的函数
		       forDomChildren(children)
			}
			//封装一个函数,给出所有子节点,显示所有子节点
			function forDomChildren(child){
				//遍历所有的子节点
				for(var i=0;i<child.length;i++){
					//显示所有的子节点名称
					getNodeName(child[i])
					//判断子节点下面是否还有子节点,如果有继续遍历
					child[i].children && forDOM(child[i])
				}
			}
				//封装一个函数用来获取节点名称
				function getNodeName(node){
					console.log('节点名称'+node.nodeName)
				}
				//调用函数,传入根节点
				forDOM(root)
				
				/*执行流程
				 * 第一个函数:给出根节点,找到所有子节点 forDom()
				 * 获取这个根节点的子节点
				 *var chidren=根节点.children
				 * 调用第二个函数
				 * 
				 * 第二个函数,给出所有子节点,把每个子节点名字显示出来
				 * for(var i=0;i<child.length;i++){}
				 * 每个子节点  child[i]
				 * child还有子节点,此时child变为根节点,继续遍历
				 * child[i].children && forDOM(child[i])
				 * 
				 * 第三个函数 获取节点名称
				 * getNodeName()
				 */
		</script>
	</body>
</html>

/*执行流程:
* 第一个函数,给出根节点,找到所有的子节点;forDom();
* 获取这个根节点的子节点
* var children=root1.children;
* 调用第二个函数
*
* 第二个函数,给出所有子节点,把每个子节点名字显示出来
* 每个子节点 child[i]
* 显示所有的子节点名字
* getNodeName(child[i])
*
* 第三个函数获取节点名称
* getNodeName()
*/

InLett_杨捷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js遍历DOM树(注释+流程)

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <div> <div> <p></p> <span></span&...
复制链接

扫一扫