遍历DOM树

最新推荐文章于 2024-05-21 09:00:12 发布

原创最新推荐文章于 2024-05-21 09:00:12 发布 · 207 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一种遍历DOM树的方法，通过JavaScript实现，详细解释了如何从根节点开始，递归地访问页面中所有节点的过程。代码示例清晰展示了获取节点、遍历子节点及显示节点名称的步骤。

遍历DOM树

	<script type="text/javascript">
			//获取页面中的根节点
			var root = document.documentElement;
			//console.log(root); //默认获取页面中的整个标签

			//封装一个函数用来获取页面中的所有节点
			function getDom(root) {
				//获取根节点下的子节点
				var children = root.children;
				//console.log(children);
				//遍历每个子节点;
				forDom(children);
			}
			getDom(root);
			//定义一个函数遍历每一个子节点
			function forDom(child) {
				//遍历每一个子节点
				for(var i = 0; i < child.length; i++) {
					//显示每个子节点的名字
					getNode(child[i]);
					//如果子节点下面还有子节点 继续调用第一个函数
					if (child[i].children) {
						getDom(child[i])
					}
					child[i].children &&getDom(child[i])
				}
			}
			//封装一个函数显示每个节点的名字
			function getNode(node) {
				console.log('节点名称' + node.nodeName)
			}
		</script>

解释 :
/*var root =document.documentElement;
* 获取页面的根节点
* 第一个函数获取根节点下的所有子节点
* var children=根节点.children;
* 调用第二个函数
* forDom(children);
* 遍历根节点下的所有子节点for(var i=0;i<child.length;i++){
* getNode(child[i]);显示每一个节点的名字
* 判断如果获取的子节点下面还有子节点继续调用上面的函数
* child[i].children&&getDom(child[i])
*
* }
* 第三个函数显示每一个节点的名称
* getNode(node)
*
*
*
*/