createtreewalker 通过 whattoshow 和 filter 参数在遍历中跳过不符合条件的节点，filter 必须是含 acceptnode 方法的对象，返回 nodefilter.filter_accept/reject/skip 才有效，返回布尔值会被忽略导致隐式跳过。
createTreeWalker 的基本用法和过滤逻辑
createTreeWalker 不是遍历所有节点再手动 if 过滤，而是靠 whatToShow 和 filter 两个参数在遍历过程中“跳过”不符合条件的节点。它返回一个可迭代的 TreeWalker 对象，调用 nextNode() 或 firstChild() 等方法时，只会停在满足条件的节点上。
关键点在于：filter 是一个对象，必须有 acceptNode 方法，且该方法必须返回 NodeFilter.FILTER_ACCEPT、NodeFilter.FILTER_REJECT 或 NodeFilter.FILTER_SKIP —— 返回其他值（比如 true/false）会被忽略，等同于 FILTER_SKIP，导致节点被跳过但不报错，非常隐蔽。
-
whatToShow控制节点类型范围（如NodeFilter.SHOW_ELEMENT、NodeFilter.SHOW_TEXT），先于filter起作用 -
filter是二次筛选，可基于属性、内容、位置等任意逻辑判断 - 如果只用
whatToShow就够用（比如只要所有div），就不必写filter，性能更好
用 acceptNode 实现自定义条件（比如 class 包含 “btn”）
常见错误是把 acceptNode 写成普通函数返回布尔值，或忘记用 instanceof 判断节点类型——因为 TreeWalker 可能传入文本节点、注释节点等，而它们没有 classList。
const walker = document.createTreeWalker(
document.body,
NodeFilter.SHOW_ELEMENT,
{
acceptNode(node) {
// 必须显式检查 node 类型，否则 .classList 会报错
if (!(node instanceof HTMLElement)) return NodeFilter.FILTER_SKIP;
if (node.classList.contains('btn')) {
return NodeFilter.FILTER_ACCEPT;
}
return NodeFilter.FILTER_SKIP;
}
},
false
);
let node;
while (node = walker.nextNode()) {
console.log(node); // 只输出带 class="btn" 的元素
}
- 不能用
node.className.includes('btn')替代classList.contains，前者会误匹配class="button" - 返回
FILTER_REJECT表示“这个节点及其子树都不进队列”，慎用；FILTER_SKIP只跳过当前节点，继续遍历子节点 - 若需排除某类节点（如
script、style），可在acceptNode开头加if (node.tagName === 'SCRIPT' || node.tagName === 'STYLE') return NodeFilter.FILTER_SKIP;
为什么用 TreeWalker 而不用 querySelectorAll + forEach？
两者适用场景不同：querySelectorAll 返回静态快照，适合一次性获取；TreeWalker 是实时、深度优先、可中断的遍历器，适合需要按顺序逐个处理、中途可能终止、或需跳过整棵子树的场景。
- 当 DOM 动态变化频繁，又想避免重复查询时，
TreeWalker的currentNode可保留状态，比反复调用querySelectorAll更轻量 - 需要跳过某个容器及其全部后代（比如广告区域），用
FILTER_REJECT比递归removeChild更高效 - 若只是找几个特定元素，
document.querySelectorAll('.foo, .bar')更直观；但若逻辑复杂（如“第一个包含非空文本的p后面的第三个span”），TreeWalker的可控性更强
容易踩的坑：nextNode() 返回 null 的几种情况
nextNode() 返回 null 并不一定表示遍历结束，可能是当前节点无符合条件的后续节点，也可能是 filter 把所有候选都 SKIP 或 REJECT 了。
- 没设置
whatToShow（默认为0），结果什么也遍历不到 -
acceptNode中用了console.log或异步操作，但TreeWalker不支持异步回调，会导致逻辑错乱 - 节点被移出 DOM 后，
walker.currentNode仍指向原节点，但nextNode()可能卡住或返回null，需自行判断是否仍在文档中（node.isConnected） - 在
acceptNode中修改了 DOM 结构（如删节点），可能导致遍历跳过或重复，应避免
真正难调试的是 acceptNode 里没返回明确的 FILTER_* 常量——浏览器不会报错，但行为完全不可预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
