第一种:
首先假设一棵简单的DOM树
<div id="subTree">
<form>
<input type="text" name="" value="">
</form>
<p>Paragraph</p>
<span>Span</span>
</div>
第一种遍历:回调函数
function traverseDOM(element,callback){
callback(element);//用回调函数处理当前节点
element=element.firstElementChild;
//遍历每个子树
while(element){
traverseDOM(element,callback);
element=element.nextElementSibling;
}
}
const subTree=document.getElementById("subTree");
//通过traverseDOM方法,从根节点开始遍历
traverseDOM(subTree,function (element){
console.log(element);
})
第二种:
//获取DOM树的根节点
var root = document.getElementById('subTree');
console.log(root);//打印跟节点
//获取根节点的孩子
function forDOM(root1) {
var children = root1.children;
//遍历孩子
for (var i = 0; i < children.length; i++) {
var child = children[i];
console.log(child);
child.children && forDOM(child);
}
}
forDOM(root);
第三种:使用迭代器方式
function * DomTraversal(element) {
yield element;
element=element.firstElementChild;
while ((element)) {
//用yield*将迭代控制转移到另一个DomTraversal生成器实例上
yield* DomTraversal(element);
element = element.nextElementSibling;
}
}
const subTree=document.getElementById("subTree");
for(let element of DomTraversal(subTree)){
console.log(element);
}
在不必要使用回调函数的情况下,使用生成器来解耦合代码