HTML 中 childNodes 包含空白文本节点的原因解析

childNodes 返回所有子节点（包括空白文本节点），而 children 仅返回元素节点；HTML 中换行与缩进会被解析为 Text 节点，这是符合 DOM 规范的正常行为。

`childnodes` 返回所有子节点（包括空白文本节点），而 `children` 仅返回元素节点；html 中换行与缩进会被解析为 `text` 节点，这是符合 dom 规范的正常行为。

在 DOM 操作中，childNodes 和 children 虽然都用于访问容器的子内容，但它们的语义与返回结果有本质区别：

• element.childNodes：返回一个 NodeList，包含所有类型的子节点，包括元素节点（Element）、文本节点（Text）、注释节点（Comment）等；
• element.children：返回一个 HTMLCollection，仅包含元素节点（即
  、

  等标签），自动过滤掉文本、注释等非元素节点。

  你观察到的「额外 text 节点」正是 HTML 源码中

  标签之间的换行符与空白符（如回车、空格、制表符）被浏览器解析为 Text 节点所致。例如以下结构：

  <section class="section1">
    <div class="parent">...</div>
    <div class="parent">...</div>
    <div class="parent-3">...</div>
  </section>

  其中每对

  与

  之间的换行和缩进（即视觉上的“空白行”）在 DOM 树中会生成独立的 Text 节点——其 nodeType === 3，nodeValue 通常为 "\n " 这类空白字符串。

  ✅ 验证方式（控制台执行）：

  

  AI抖音

  AI抖音，会思考的抖音

  下载

  立即学习“前端免费学习笔记（深入）”；

  const section = document.querySelector('.section1');
  console.log(section.childNodes); // NodeList(7): [text, div, text, div, text, div, text]
  console.log(section.children);  // HTMLCollection(3): [div, div, div]
  
  // 查看第一个 text 节点详情
  const firstTextNode = section.childNodes[0];
  console.log(firstTextNode.nodeType); // 3
  console.log(firstTextNode.nodeValue.trim()); // ""（纯空白）

  ? 小技巧：若需过滤出纯元素节点，可结合 Array.from() 与 nodeType 判断：

  const elementChildren = Array.from(section.childNodes)
    .filter(node => node.nodeType === Node.ELEMENT_NODE);
  console.log(elementChildren); // 等效于 section.children（但返回数组）

  ⚠️ 注意事项：

  • 不要依赖 HTML 源码格式来避免文本节点——实际项目中保持可读性缩进是合理且必要的；
  • 在遍历 childNodes 时务必检查 node.nodeType，否则可能因意外操作 Text 节点（如调用 .querySelector()）而报错；
  • 若目标仅为操作子元素，*优先使用 children 或 `querySelectorAll(':scope > ')`**，语义清晰、性能更优、兼容性更好；
  • children 是实时集合（live collection），但 childNodes 同样是实时的；二者均反映当前 DOM 状态，无需手动刷新。

  总结：所谓「额外 text 节点」并非 bug，而是 DOM 规范对源码空白的忠实建模。理解这一机制，有助于写出更健壮的节点遍历逻辑，并在调试时快速识别 childNodes 与 children 的行为差异。