以下纯属个人见解，已经通过测试，若有更好意见，请写下来。。（省略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遍历方法 1. 前向遍历（深度优先遍历） 使用`childNodes`属性可以获取元素的所有子节点，包括文本节点和注释节点。...
DOM树由文档中的所有节点（元素节点、文本节点、注释节点等）所构成的一个树结构，DOM树的解析和构建是浏览器要实现的关键功能。既然DOM树是一个树结构，那么我们就可以使用遍历树结构的相关方法来对DOM树进行遍历，...
遍历DOM时，可以使用非递归方式，例如通过while循环和nextSibling或firstChild属性来遍历节点，这样可以避免递归调用栈的增长。以下是一个简单的示例： ```javascript var node = xmlDoc.documentElement....
6. 遍历子节点：对于获取的节点，我们还可以通过`childNodes`属性来获取其所有子节点，`children`属性则只返回元素子节点。`firstChild`和`lastChild`属性分别指向第一个和最后一个子节点，`nextSibling`和`...
4. **递归遍历DOM** - 使用递归函数可以遍历整个DOM树。从根节点开始，访问每个节点，然后对其子节点进行同样的操作，直到没有子节点为止。 ```javascript function traverse(node) { console.log(node.tagName);...
JavaScript获取HTML DOM节点元素的方法是Web开发中的基础技能，尤其是在动态更新页面内容时。本文将对几种常见的DOM操作方法进行详细解释。 首先，我们可以通过顶层的`document`对象来获取元素： 1. `document....
本篇将详细解释如何使用JS代码实现树节点的递归遍历，以及它在实际应用中的价值。 首先，让我们了解什么是树结构。在计算机科学中，树是由节点（或称为顶点）和边构成的一种非线性数据结构。每个节点可以有零个或多...
6. **$(selector).closest(selector)**: 这个方法会向上遍历DOM树，直到找到匹配给定选择器的第一个祖先元素。这对于查找最近的父级元素非常有用，比如寻找最近的表单元素。 在实际应用中，这些方法可以组合使用，...
- 使用递归遍历DOM树，收集每个节点的信息（如标签名、属性和内容）。 - 将收集的信息格式化为字符串，并调用`console.log`打印到浏览器控制台。 - 可能还包含了其他高级功能，如过滤特定类型的节点、颜色高亮关键...
本文主要介绍如何使用JavaScript获取指定节点的父节点、子节点以及相邻节点的方法。 首先，我们可以从`document`节点开始获取元素。`document.getElementById()`是最常用的方法，通过元素的ID来精确获取元素。但...
对于更复杂的遍历需求，`.find()`方法十分有用，它可以递归地搜索后代元素，而`.parentsUntil()`和`.nextUntil()`则能选取到指定元素之间的节点。此外，`.each()`函数是一个迭代器，可以对jQuery对象中的每个元素...
在JavaScript中，DOM节点对象通常包含子节点的引用，例如`firstElementChild`和`lastElementChild`属性可以分别获取第一个和最后一个直接子元素。在遍历过程中，我们可以利用这些属性来遍历DOM树。 **前序遍历代码...
这里，我们将会深入探讨如何使用jQuery来实现递归遍历表格的tr子节点。 首先，我们需要了解HTML表格的基本结构。一个表格由`<table>`标签包裹，其中包含多个`<tr>`（表格行）元素。每行可以包含多个`<td>`（表格...
"遍历json显示树形菜单"是一个常见的需求，涉及到的主要知识点包括JSON解析、递归遍历以及DOM操作。下面将详细阐述这些关键概念。 1. **JSON解析**： JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也...
DOM提供了遍历DOM树的能力，常见的遍历方式包括深度优先和广度优先遍历，通常利用递归或队列数据结构来实现。 总之，《JavaScript DOM编程艺术》一书中关于DOM的核心方法和属性的介绍，为我们提供了强大的工具集，...