以下纯属个人见解，已经通过测试，若有更好意见，请写下来。。（省略1000字...）
1.先序遍历的方式：
<html>
<head>
<title>递归遍历所有节点</title>
<script>
//currentNode：当前节点;targetNode：目标节点
function getTargetNode(currentNode,targetNode){
alert(targetNode);
//自己不为空并有孩子
if (currentNode != null && currentNode.hasChildNodes()){
if(currentNode.nodeName.toLowerCase() == targetNode){
alert("已找到该节点");
return currentNode;
}
currentNode = currentNode.firstChild;
alert(currentNode.nodeName)
alert("自己不为空，并且有孩子"+currentNode.nodeName)
getTargetNode(currentNode,targetNode);
//自己不为空并且没孩子
}else if (currentNode != null && !currentNode.hasChildNodes()){
//该节点是目标节点
if (currentNode.nodeName.toLowerCase() == targetNode){
alert("已找到该节点");
return currentNode;
//该节点不是目标节点,判断是否有兄弟节点
}else if (currentNode.nextSibling != null){
currentNode = currentNode.nextSibling;
alert("不是目标节点，并且有兄弟节点"+currentNode.nodeName)
getTargetNode(currentNode,targetNode);
}else{
//该节点不是目标节点，并且没有下一个兄弟节点，该节点的父节点下的所有节点已遍历完毕，返回到父节点并从父节点的下一个兄弟节点开始遍历。
if (currentNode.parentNode != null && currentNode.parentNode.nextSibling != null){
currentNode = currentNode.parentNode.nextSibling;
alert("父节点的下一个兄弟节点"+currentNode.nodeName);
getTargetNode(currentNode,targetNode);
//该节点的父节点的兄弟节点为空，递归返回，直到找到不为空的父节点
}else if (currentNode.parentNode != null && currentNode.parentNode.nextSibling == null){
while(true){
if(currentNode.parentNode != null && currentNode.parentNode.nextSibling == null){
currentNode = currentNode.parentNode.parentNode;
alert("返回该节点的爷爷节点"+currentNode.nodeName);
//若递归返回的节点为html，则退出遍历
if(currentNode.nodeName.toLowerCase() == 'html'){
alert("遍历结束，未找到该节点");
break;
}
}else if (currentNode.parentNode != null && currentNode.parentNode.nextSibling != null){
currentNode = currentNode.parentNode.nextSibling;
getTargetNode(currentNode,targetNode);
}
}
}
}
//自己为空
}else{
getTargetNode(document.documentElement,targetNode);
}
}
</script>
</head>
<body>
<h1 align="center">节点完全遍历</h1>
<form name="form1" id="form1">
<p align="center">
<img src="target.gif" />
<br /><br />
<input type="button" value="Get it" οnclick="getTargetNode(document.documentElement,'img')" />
</p>
</form>
</body>
</html>
2.简单递归方式 同样的HTML代码
<script type="text/javascript" language="javascript">
function getTargetNode(rootElement){
var currentNode= rootElement.childNodes;
for(var i = 0; i < currentNode.length; i++){
alert(currentNode[i].nodeName);
getTargetNode(currentNode[i]);
}
}
</script>
1773
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
