以下纯属个人见解，已经通过测试，若有更好意见，请写下来。。（省略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" onclick="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>
分享到：
相关推荐
DOM树由文档中的所有节点（元素节点、文本节点、注释节点等）所构成的一个树结构，DOM树的解析和构建是浏览器要实现的关键功能。既然DOM树是一个树结构，那么我们就可以使用遍历树结构的相关方法来对DOM树进行遍历，...
15.2 理解DOM节点 15.3 节点 15.3.1 父节点和子节点 15.3.2 兄弟节点 15.3.3 nodeName和nodeType属性 15.3.4 空白bug 15.4 遍历DOM 15.5 DOM查看器 15.6 查询DOM的快捷...
需求分析： 根据关键字搜索网页内容，并且高亮显示内容中的关键字 细节分析： ...所有匹配和替换操作只针对当前DOM元素中文本节点，通过递归函数遍历操作所有节点 前端框架： angularjs^1.2.9 $sco
两个关键点 1.使用DOMParser解析xml 2.递归遍历xml树，按格式输出每一个节点 关于使用DOMParser 此方法目前在IE9以上和其它浏览器里都是支持的，所以这里不在写关于IE9以下不支持的情况, 具体的使用请跳转 ...
它以递归方式遍历网页DOM树，并添加data-testabilityid属性，该属性的值表示DOM树根节点的唯一元素路径。 每次DOM树更改都会触发漫游。 当您在页面元素上方时，可以通过使用shift +鼠标左键单击来调查生成的值。 值...
• sample16.htm 使用for each…in语句遍历对象属性和数组元素 • sample17.htm 对象的引用 • sample18.htm with语句 • sample19.htm with语句的等价代码 • sample20....
它以递归方式遍历网页DOM树，并添加data-testabilityid属性，该属性的值表示DOM树根节点的唯一元素路径。 每次DOM树更改都会触发漫游。 当您在页面元素上方时，可以通过使用shift +鼠标左键单击来调查生成的值。 值...
常见的场景有asp.net里的控件机制（即control里可以包含子control，可以递归操作、添加、删除子control），类似的还有DOM的机制，一个DOM节点可以包含子节点，不管是父节点还是子节点都有添加、删除、遍历子节点的...
3.1.htm 遍历数组元素 3.2.htm 改变数组元素 3.3.htm 用对象的方式实现数组 3.4.htm 将数组转换为字符串 3.5.htm 操作数组元素 3.6.htm 实现多维数组 第4章...
Lucid使用React DevTool的Global Hook注入脚本，以在每次调用setState时递归遍历React DOM，从而生成一棵树和一个日志，每个日志和日志都显示实时反馈。 我们的应用程序本身在内部使用React，因此当您的实时应用...
第2章 jQuery操作DOM元素 2.1 如何验证某个元素是否为空 2.2 检查特定的HTML元素是否存在 2.3 判断HTML元素是否嵌套 2.4 获取当前元素的索引值 2.5 插入节点元素 2.6 复制节点元素 2.7 替换节点元素 2.8 删除节点...
10-26 4 jquery对象集合遍历的四种形式及练习题讲解 jquery的dom操作 10-27 1课程回顾 10-27 2 jquery的dom操作 内部插入 外部插入 10-27 3 jquery节点操作 10-27 4 练习题讲解 10-27 5 jquery属性操作 获取子元素和...
10-26 4 jquery对象集合遍历的四种形式及练习题讲解 jquery的dom操作 10-27 1课程回顾 10-27 2 jquery的dom操作 内部插入 外部插入 10-27 3 jquery节点操作 10-27 4 练习题讲解 10-27 5 jquery属性操作 获取子元素和...
10-26 4 jquery对象集合遍历的四种形式及练习题讲解 jquery的dom操作 10-27 1课程回顾 10-27 2 jquery的dom操作 内部插入 外部插入 10-27 3 jquery节点操作 10-27 4 练习题讲解 10-27 5 jquery属性操作 获取子元素和...
10-26 4 jquery对象集合遍历的四种形式及练习题讲解 jquery的dom操作 10-27 1课程回顾 10-27 2 jquery的dom操作 内部插入 外部插入 10-27 3 jquery节点操作 10-27 4 练习题讲解 10-27 5 jquery属性操作 获取子元素和...
10-26 4 jquery对象集合遍历的四种形式及练习题讲解 jquery的dom操作 10-27 1课程回顾 10-27 2 jquery的dom操作 内部插入 外部插入 10-27 3 jquery节点操作 10-27 4 练习题讲解 10-27 5 jquery属性操作 获取子元素和...
{5.2.1}将浮点数四舍五入到指定精度}{98}{subsection.5.2.1} {6}Exception}{99}{chapter.6} {6.1}\ttfamily try-catch}{99}{section.6.1} {6.2}\ttfamily finally}{100}{section.6.2} {6.3}\ttfamily throws}{...