如何用 text 节点与 comment 节点区分页面中的注释与文本

如何用 text 节点与 comment 节点区分页面中的注释与文本

在 DOM 解析与操作的日常工作中，你是不是也遇到过类似的困扰：一段看似普通的文本内容，怎么才能准确判断它究竟是真正的文本节点，还是一个被浏览器“隐藏”起来的注释呢？这事儿听起来有点绕，但其实只要抓住几个核心点，区分它们就变得非常简单了。

看 nodeType 属性是最直接的方式

最可靠、最直接的办法，莫过于查看节点的 nodeType 属性。DOM 中的每种节点都有其专属的“身份证号码”——这就是 nodeType 的值。

• 文本节点（Text Node）的 nodeType 恒等于 3。
• 注释节点（Comment Node）的 nodeType 则恒等于 8。

看一个简单的例子就明白了：

const el = document.getElementById('container');
el.childNodes.forEach(node => {
  if (node.nodeType === 3) {
    console.log('这是文本节点：', node.textContent.trim());
  } else if (node.nodeType === 8) {
    console.log('这是注释节点：', node.textContent);
  }
});

通过这个简单的判断，你就能在遍历子节点时，将两者清晰地区分开来，根本无需去“猜”内容。

用 nodeValue 或 textContent 判断内容但不替代 nodeType

当然，我们也能通过 nodeValue 或 textContent 来读取节点内容。但这里有个关键点需要谨记：这两个属性能告诉你“内容是什么”，但不能告诉你“它是什么”，绝不能替代 nodeType 的类型判断。

• 对于 text 节点，nodeValue 和 textContent 都返回纯粹的文本内容，包括其中的空格和换行符。
• 对于 comment 节点，nodeValue 会返回注释符号 内部的原始字符串。textContent 行为类似，不过它不会去解析内容中可能存在的 HTML 标签。

需要特别警惕的是，绝不能仅仅因为内容里包含了“--”或“”这段文本。

遍历子节点时避开注释节点（常见需求）

在实际开发中，一个常见场景是只想提取和处理页面里的有效文本，这时就需要把注释节点过滤掉。方法很简单：

Array.from(el.childNodes)
  .filter(node => node.nodeType === 3 && node.textContent.trim())
  .forEach(textNode => {
    console.log('有效文本：', textNode.textContent.trim());
  });

或者，如果你想要一个更通用的遍历逻辑，通常可以记住这几个关键的类型：

• nodeType === 1：这是元素节点，比如 div、span 等。
• nodeType === 3：这是我们需要关注的文本节点。
• node.nodeType === 8：这就是注释节点，在大多数文本处理场景下可以直接跳过。

动态创建时主动指定节点类型

当我们从零开始用 Ja vaScript 动态创建节点时，节点类型从一开始就由创建方法决定了：

• 调用 document.createTextNode("hello")，生成的就是一个标准的 text 节点。
• 调用 document.createComment("说明信息")，创建的则是一个 comment 节点。

这些节点被插入到 DOM 树后，其类型属性会保持不变，依旧可以通过上面提到的 nodeType 判断法来准确识别。这样一来，无论是静态解析还是动态生成的内容，区分文本与注释都有了清晰、统一的标准可循。