js实现DOM遍历_遍历dom树节点方法
遍历dom节点
遍历DOM节点常用一般用节点的 childNodes, firstChild, lastChild, nodeType, nodeName, nodeValue属性。在获取节点nodeValue时要注意，元素节点的子文本节点的nodeValue才是元素节点中文本的内容。下面介绍基于给定的起点对DOM结构执行深度优先(dfs)和广度遍历（BFS）的遍历操作。
假定我仅遍历 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));本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！