递归遍历: 查找指定父节点下所有子代节点
如何: 2步:
1. 先遍历所有直接子节点
2. 在遍历直接子节点时，对每个子节点调用和父节点完全相同的方法。
算法: 深度优先遍历: 每次都优先遍历子节点
所有子节点遍历完，才返回遍历兄弟节点
递归的效率: 极低。
解决: 绝大多数递归都可用循环代替
遍历API: 每次仅遍历下一个节点，可用循环反复执行(了解)
1. 节点迭代器:
如何: 2步:
1. 创建迭代器对象:
var iterator=document.createNodeIterator(
parent,NodeFilter.SHOW_ALL, null, false
.SHOW_ELEMENT
);
2. var 原先的节点对象=iterator.nextNode(); 跳到下一个节点如果返回null，说明到头了
内置的就是深度优先遍历算法。
html
<!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> <script src="js/3_2.js"></script> </body></html> js
//定义函数：遍历给定父元素下的直接子节点function getChildren1(parent){ //如果parent不是文本节点，就输出节点名，否则输出节点值 console.log(parent.nodeType!=3?parent.nodeName:parent.nodeValue); //遍历parent下所有直接子节点 var children=parent.childNodes; for(var i=0;i<children.length;i++){ //对父元素的每个子节点调用和父元素完全相同的函数 getChildren1(children[i]); }}function getChildren2(parent){ //创建迭代器对象 var iterator=document.createNodeIterator( parent,NodeFilter.SHOW_ALL,null,false ); //用循环反复调用迭代器的nextnode()跳向下一个节点 var node; while ((node=iterator.nextNode())!=null){ console.log(node.nodeType!=3?node.nodeName:node.nodeValue); }}getChildren2(document.body);
原文地址：https://www.cnblogs.com/sske531549304/p/9418867.html
时间： 2024-09-27 23:37:36