如何用 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 判断法来准确识别。这样一来，无论是静态解析还是动态生成的内容，区分文本与注释都有了清晰、统一的标准可循。
