脚本宝典收集整理的这篇文章主要介绍了DOM 节点树遍历的 JS 实现,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
分享 DOM 节点树深度遍历、广度遍历代码。
假定我仅遍历 body 且其结构如下:
<body>
<section class="container">
<div class="left">
<div class="menu"></div>
</div>
<div class="right">
<div class="box1"></div>
<div class="box2"></div>
</div>
</section>
</body>
深度遍历(DFS)
遍历完父节点的所有子节点的子节点的子节点...再遍历其兄弟节点。
输出:[section.container, div.left, div.menu, div.right, div.box1, div.box2]
const DFS = {
nodes: [],
do (root) {
for (let i = 0;i < root.childNodes.length;i++) {
var node = root.childNodes[i];
// 过滤 text 节点、script 节点
if ((node.nodeType != 3) && (node.nodeName != 'SCRIPT')) {
this.nodes.push(node);
this.do(node);
}
}
return this.nodes;
}
}
console.log(DFS.do(document.body));
广度遍历(BFS)
遍历完父节点的所有兄弟节点再遍历其子节点。
输出:[section.container, div.left, div.right, div.menu, div.box1, div.box2]
const BFS = {
nodes: [],
do (roots) {
var children = [];
for (let i = 0;i < roots.length;i++) {
var root = roots[i];
// 过滤 text 节点、script 节点
if ((root.nodeType != 3) && (root.nodeName != 'SCRIPT')) {
if (root.childNodes.length) children.push(...root.childNodes);
this.nodes.push(root);
}
}
if (children.length) {
var tmp = this.do(children);
} else {
return this.nodes;
}
return tmp;
}
}
console.log(BFS.do(document.body.childNodes));
非递归版:
const BFS = {
nodes: [],
do (roots) {
var roots = new Array(...roots);
for (let i = 0;i < roots.length;i++) {
var root = roots[i];
// 过滤 text 节点、script 节点
if ((root.nodeType != 3) && (root.nodeName != 'SCRIPT')) {
if (root.childNodes.length) roots.push(...root.childNodes);
this.nodes.push(root);
}
}
return this.nodes;
}
}
console.log(BFS.do(document.body.childNodes));
作者:呆恋小喵
我的后花园:https://sunmengyuan.github.io...
我的 github:https://github.com/sunmengyuan
以上是脚本宝典为你收集整理的DOM 节点树遍历的 JS 实现全部内容,希望文章能够帮你解决DOM 节点树遍历的 JS 实现所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。