<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>