TreeWalker 能直接过滤注释节点，但必须显式设置 whatToShow 为 NodeFilter.SHOW_COMMENT；SHOW_ALL 并非“全显示”，且无效 HTML 已被浏览器修正，TreeWalker 无法捕获。
TreeWalker 能不能直接过滤注释节点
能，但必须显式配置 whatToShow 为 NodeFilter.SHOW_COMMENT，默认值 NodeFilter.SHOW_ELEMENT 完全忽略注释。不设这个，treeWalker.nextNode() 永远不会返回任何 Comment 节点。
常见错误是只写 document.createTreeWalker(root, NodeFilter.SHOW_ALL, ...)，以为 SHOW_ALL 就“全都能看到”——其实它只是位掩码组合的起点，仍需配合 filter 函数做逻辑筛选，且浏览器对 SHOW_ALL 中某些类型（如 SHOW_DOCUMENT_TYPE）的支持并不一致。
-
NodeFilter.SHOW_COMMENT是唯一可靠捕获注释的方式 - 无效代码（如未闭合标签、自定义非法标签）在 DOM 解析后已不复存在，TreeWalker 看到的是浏览器修正后的标准节点树，不是原始 HTML 字符串
- 想定位“被浏览器静默忽略的无效 HTML”，得回退到
innerHTML字符串层面做正则匹配，TreeWalker 无能为力
用 acceptNode 过滤特定注释内容
TreeWalker 的 filter 参数需传入一个对象，其 acceptNode 方法返回 NodeFilter.FILTER_ACCEPT、FILTER_REJECT 或 FILTER_SKIP。靠它可实现关键词过滤，比如只取含 TODO 或 DEBUG 的注释：
const filter = {
acceptNode(node) {
if (node.nodeType === Node.COMMENT_NODE) {
const text = node.textContent.trim();
if (text.startsWith('TODO') || text.includes('DEBUG')) {
return NodeFilter.FILTER_ACCEPT;
}
}
return NodeFilter.FILTER_REJECT;
}
};
<p>const walker = document.createTreeWalker(
document.body,
NodeFilter.SHOW_COMMENT,
filter
);注意：不要在 acceptNode 里修改 DOM（如 node.remove()），会导致遍历中断或报错 NotFoundError；清理操作必须等遍历完成后再统一处理。
立即学习“前端免费学习笔记（深入）”；
为什么遍历时看不到 script 标签里的注释
HTML 注释（<!-- ... -->）只在文档层级有效，<script> 元素内部的 // 或 /* */ 是 JavaScript 语法，根本不会生成 DOM 注释节点。TreeWalker 只遍历 DOM 树，不解析脚本内容。
- DOM 中的注释节点只能来自 HTML 源码中
<!--...-->片段 -
<script type="text/template">或<template>内部的注释，若该元素未被插入主 DOM，TreeWalker 默认也遍历不到（除非显式把它的content或innerHTML作为 root 传入） - 服务端渲染（SSR）注入的注释，只要最终出现在客户端 DOM 中，就能被正常捕获
性能与兼容性实际限制
TreeWalker 在现代浏览器中性能尚可，但遍历深度超过 10k 节点时，同步调用 nextNode() 会明显卡顿。IE11 完全不支持 createTreeWalker，需用 NodeIterator 回退（API 类似但方法名不同），或改用递归 childNodes 遍历。
- 移动端低端设备上，避免在高频事件（如
scroll）中重复创建 TreeWalker 实例 -
NodeFilter常量在 Safari 旧版本中可能未定义，建议用数值代替：8对应SHOW_COMMENT - 如果目标只是提取注释文本，用
document.createNodeIterator(root, Node.COMMENT_NODE, filter)更轻量，行为几乎一致，且部分老环境兼容稍好
真正难处理的不是怎么写，而是得先确认：你看到的“无效代码”到底是 DOM 解析前的字符串问题，还是解析后异常的节点结构——这两类问题，TreeWalker 从根子上就管不了同一个事。
