遍历节点树

最新推荐文章于 2024-07-23 23:00:13 发布

原创最新推荐文章于 2024-07-23 23:00:13 发布 · 944 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#遍历节点树

WEB-DOM 专栏收录该内容

36 篇文章

订阅专栏

<span style="font-size:18px;"><!DOCTYPE HTML>
<html>
	<head>
		<title>遍历节点树</title>
		<meta charset="utf-8"/>
		<script src="js/3_2.js"></script>
	</head>
	<body>
		<span>Hello World !</span>
		<ul id="nav">
			<li>电影</li>
			<li>综艺
				<ul>
					<li>跑男</li>
					<li>爸爸</li>
					<li>极限</li>
				</ul>
			</li>
			<li>剧集</li>
		</ul>	
	</body>
</html></span>

js:

<span style="font-size:18px;"><span style="background-color: rgb(255, 102, 102);">//专门遍历parent下的直接子节点</span>
<span style="color:#cc0000;">/*递归实现*/</span>
function getChildren(parent){
  //输出parent的nodeName
  console.log(parent.nodeType!=3?
                parent.nodeName:parent.nodeValue);
  //遍历parent下每个直接子节点
  for(var i=0,len=parent.childNodes.length;i<len;i++){
    //输出当前子节点的nodeName
    arguments.callee(parent.childNodes[i]);
  }
}
window.οnlοad=function(){
  getChildren2(document.body);
}
<span style="color:#cc0000;">//使用循环</span>
function getChildren2(parent){
	var org=parent;//先保存开始节点
	while(true){
    console.log(parent.nodeType==3?
                  parent.nodeValue:parent.nodeName);
		if(parent.firstChild){//如果有子节点，先找子节点
			parent=parent.firstChild;//跳到子节点
		}else if(parent.nextSibling){//否则找下一个兄弟节点
			parent=parent.nextSibling;//跳到下一个兄弟
		}else{//没有子节点，没有下一个兄弟，就找爹的兄弟
			//如果爹没有兄弟，就跳到父节点，继续向上
			while(!parent.parentNode.nextSibling
					&&parent!=org.lastChild){
				parent=parent.parentNode;
			}//直到爹有兄弟，就跳到爹的兄弟。
			parent=parent.parentNode.nextSibling;
			//如果已经是开始节点的最后一个孩子，就退出
			if(parent==org.lastChild){break;}
		}
	}
}</span>