createTreeWalker 是一个可控、轻量、可中断的 DOM 遍历 API，核心在于设计过滤逻辑（acceptNode）和遍历策略，支持精确节点筛选、深度控制、动态条件判断及与 MutationObserver 协同处理动态 DOM。
createTreeWalker 是一个被低估但极其强大的 DOM API，它不像 querySelectorAll 那样“开箱即用”，但胜在可控、轻量、可中断，特别适合处理深层嵌套、动态更新或需精细条件判断的 DOM 遍历场景。关键不在于“怎么创建”，而在于如何设计 过滤逻辑 和 遍历策略 来应对真实复杂结构。
明确 whatToShow：只暴露你真正关心的节点类型
默认只显示元素节点（NodeFilter.SHOW_ELEMENT），但复杂 DOM 常含文本、注释、CDATA 等干扰项。比如要提取所有带语义的文本内容（含文本节点但排除空白和换行）：
- 用
NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT组合掩码 - 再在 filter 函数中剔除纯空白文本：
node.textContent.trim() === '' - 若需跳过 script/style 内容，可在 filter 中加
node.parentElement?.tagName === 'SCRIPT'判断
编写自定义 acceptNode：把业务逻辑写进过滤器里
这是实现“高级过滤”的核心。filter 不是布尔开关，而是返回 NodeFilter.FILTER_ACCEPT、.FILTER_REJECT 或 .FILTER_SKIP。例如遍历所有“非禁用且具有 data-role 的按钮”：
- 先检查
node.nodeType === Node.ELEMENT_NODE - 再判断
node.matches('button:not([disabled]):is([data-role])') - 对容器类节点（如 div.card），可用
FILTER_SKIP跳过其子树，避免无谓递归 - 注意：filter 在每次移动前调用，不缓存结果，适合动态条件（如依赖当前时间、用户权限）
控制遍历深度与方向：用 nextNode/previousNode + 状态标记
TreeWalker 默认深度优先、从左到右。但复杂树常需“只遍历两层”、“遇到特定节点就终止”或“反向收集”。技巧包括：
- 用
let depth = 0记录当前层级，在进入子节点前depth++，离开后depth-- - 遇到目标节点后，直接
walker.nextNode()返回 null，或用break退出循环 - 想反向获取父路径？先用
walker.parentNode()上溯，再配合walker.previousNode()往回找兄弟 - 避免无限循环：对动态插入的节点，确保 filter 不因 DOM 变更而反复触发同一节点
与 MutationObserver 协同：应对动态 DOM 的实时遍历
静态 TreeWalker 无法响应后续 DOM 变化。若需“持续监控并过滤新增节点”，可组合使用：
- 初始化 TreeWalker 时传入
{ childList: true, subtree: true }的 observer 配置 - 在
observer.callback中，对mutation.addedNodes逐个调用walker.parentNode().contains(node)判断是否在目标子树内 - 符合条件的新节点，再手动调用
filter.acceptNode(node)复用已有逻辑 - 注意：不要在 observer 回调中重建整个 TreeWalker，开销大；复用 walker 实例 + 局部校验更高效
不复杂但容易忽略：TreeWalker 的 currentNode 是可读写的，你可以主动赋值来“跳转”到任意兼容节点，实现非线性遍历。真正难的是把业务规则翻译成清晰、可维护的 acceptNode 逻辑——它既是过滤器，也是你的 DOM 意图说明书。
