遍历DOM树

遍历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)
*
*
*
*/