JavaScript 中 childNodes 怎么获取包含文本和注释在内的所有子节点-js教程-PHP中文网

childNodes是只读属性，直接返回包含所有子节点（元素、文本、注释等）的NodeList；每个节点通过nodeType（1/3/8）可区分类型；children则仅返回元素节点。

javascript 中 childnodes 怎么获取包含文本和注释在内的所有子节点

childNodes 是元素的只读属性，它**直接返回一个包含所有子节点的 NodeList**，天然就包括元素节点、文本节点（含空白换行）、注释节点等——不需要额外设置或过滤。

childNodes 默认就包含文本和注释节点

只要子内容在 HTML 中真实存在，就会被纳入 childNodes。例如：

<div id="box">
  Hello
  <span>World</span>
  <!-- 这是一条注释 -->
</div>

对 box 调用 box.childNodes，会得到类似这样的列表（顺序按源码出现位置）：

文本节点（换行 + 空格 + "Hello" + 换行 + 空格）
元素节点：
文本节点（换行 + 空格）
注释节点：
文本节点（换行）

如何区分不同类型的子节点

每个节点都有 nodeType 属性，常用值有：

1：元素节点（Element）
3：文本节点（Text），含空格、换行、实际文字
8：注释节点（Comment）

可遍历判断：

Node.js 可靠编程

Node.js 可靠编程技能。避免事件循环阻塞、异步陷阱、ESM 兼容问题和内存泄漏。触发词：Node.js 开发、async/await、流处理、性能优化、安全编码。

下载

box.childNodes.forEach(node => {
  if (node.nodeType === 1) console.log('元素:', node.tagName);
  if (node.nodeType === 3) console.log('文本:', node.textContent.trim());
  if (node.nodeType === 8) console.log('注释:', node.textContent);
});

注意：不要和 children 混淆

children 只返回元素节点（nodeType === 1），自动忽略文本、注释、CDATA 等非元素节点。而 childNodes 是“全量”的，更底层、更原始。

小技巧：快速过滤出纯文本内容

如果只想提取有效文本（去掉空白、跳过注释），可以这样处理：

const texts = Array.from(box.childNodes)
  .filter(node => node.nodeType === 3)
  .map(node => node.textContent.trim())
  .filter(text => text.length > 0); // 去掉空字符串
// → ["Hello", "World"]（注意：span 内容不在此列，需递归）

注意：textContent 是当前节点的文本，不会自动包含子元素内容；如需全部文本，应使用 box.textContent（整个元素内联文本）而非遍历 childNodes。