如何正确使用递归遍历 DOM 节点查找文本（避免误匹配 script 内容）-html教程-PHP中文网

如何正确使用递归遍历 DOM 节点查找文本（避免误匹配 script 内容）

该教程解析 Eloquent JavaScript 第 14 章中 talksAbout 递归函数的常见陷阱：当 HTML 中已删除目标文本（如 "book"），函数仍返回 true，根本原因是脚本自身（console.log 所在的标签）被纳入 DOM 遍历范围，导致匹配到代码中的字符串字面量。

该教程解析 eloquent javascript 第 14 章中 `talksabout` 递归函数的常见陷阱：当 html 中已删除目标文本（如 "book"），函数仍返回 `true`，根本原因是脚本自身（`console.log` 所在的 `<script>` 标签）被纳入 dom 遍历范围，导致匹配到代码中的字符串字面量。</script>

talksAbout 是一个经典的 DOM 递归文本搜索函数，其设计意图是深度遍历节点树，仅在纯文本节点（Node.TEXT_NODE）中执行 indexOf 检查。但实际运行时，它会无差别访问整个 document.body 下的所有子节点——包括 <script> 元素及其内部的文本内容。</script>

例如，以下 HTML 中虽已删除“book”一词：

  <p>I also wrote a ! Read it <a>here</a>.</p>

<script>
console.log(talksAbout(document.body, "book")); // ❌ 仍输出 true
</script>

函数仍返回 true，原因在于：<script> 标签本身是一个 ELEMENT_NODE，其 childNodes[0] 是一个 TEXT_NODE，其 nodeValue 包含了整段脚本字符串，例如：</script>

"console.log(talksAbout(document.body, \"book\"));"

其中 "book" 显然存在，因此 indexOf("book") > -1 为 true。

✅ 正确做法：排除 script 节点或限定搜索范围

最安全的修复方式是不将 <script> 元素纳入递归路径</script>，在进入子节点前主动跳过：

function talksAbout(node, string) {
  // 跳过 script 和 style 标签，避免匹配自身代码
  if (node.nodeType === Node.ELEMENT_NODE && 
      (node.tagName === 'SCRIPT' || node.tagName === 'STYLE')) {
    return false;
  }

  if (node.nodeType === Node.ELEMENT_NODE) {
    for (let child of node.childNodes) {
      if (talksAbout(child, string)) {
        return true;
      }
    }
    return false;
  } else if (node.nodeType === Node.TEXT_NODE) {
    return node.nodeValue.includes(string); // 推荐用 includes 替代 indexOf > -1
  }
  return false;
}

? 验证技巧：调试时添加日志定位源头

如原答案所示，加入 console.warn 可直观追踪匹配路径：

} else if (node.nodeType === Node.TEXT_NODE) {
  const found = node.nodeValue.includes(string);
  console.warn("? 检查文本节点:", `"${node.nodeValue.trim().slice(0, 30)}..."`, 
               "| 匹配", string, "→", found);
  return found;
}

运行后你会看到类似输出：

? 检查文本节点: "console.log(talksAbout(document..." | 匹配 book → true

这明确揭示了误匹配来源。

⚠️ 注意事项总结

永远不要对 document.body 或 document.documentElement 直接调用此类函数，除非你确认页面不含内联脚本；
更健壮的做法是限定搜索范围，例如 talksAbout(document.querySelector('main'), 'book')；
使用 node.textContent 替代遍历所有文本节点虽更简洁，但会丢失对“仅匹配可见文本”的控制粒度；
在生产环境，建议结合 Element.matches() 或 CSS 选择器预过滤节点类型，提升性能与准确性。

理解 DOM 树的真实结构（含 <script> 作为合法子元素），是避免此类“幽灵匹配”的关键前提。</script>