childNodes 返回所有子节点（包括空白文本节点），而 children 仅返回元素节点；HTML 中换行与缩进会被解析为 Text 节点，这是符合 DOM 规范的正常行为。
`child
node
s` 返回所有子节点（包括空白文本节点），而 `children` 仅返回元素节点；
html
中换行与缩进会被解析为 `text` 节点，这是符合 dom 规范的正常行为。
在 DOM 操作中，childNodes 和 children 虽然都用于访问容器的子内容，但它们的语义与返回结果有本质区别：
element.childNodes：返回一个 NodeList，包含
所有类型的子节点
，包括元素节点（Element）、文本节点（Text）、注释节点（Comment）等；
element.children：返回一个 HTMLCollection，
仅包含元素节点（即
、
等标签） ，自动过滤掉文本、注释等非元素节点。 你观察到的「额外 text 节点」正是 HTML 源码中
标签之间的
换行符与空白符
（如回车、空格、制表符）被浏览器解析为 Text 节点所致。例如以下结构：
其中每对
与
...
...
...
之间的换行和缩进（即视觉上的“空白行”）在 DOM 树中会生成独立的 Text 节点——其 nodeType === 3，nodeValue 通常为 "\n " 这类空白字符串。
✅ 验证方式（控制台执行）：
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
? 小技巧：若需过滤出纯元素节点，可结合 Array.from() 与 nodeType 判断：
⚠️ 注意事项：
不要依赖 HTML 源码格式来避免文本节点——实际项目中保持可读性缩进是合理且必要的；
在遍历 childNodes 时务必检查 node.nodeType，否则可能因意外操作 Text 节点（如调用 .querySelector()）而报错；
若目标仅为操作子元素，*
优先使用 children 或 `querySelectorAll(':scope >
')`**，语义清晰、性能更优、兼容性更好；
children 是实时集合（live collection），但 childNodes 同样是实时的；二者均反映当前 DOM 状态，无需手动刷新。
总结：所谓「额外 text 节点」并非 bug，而是 DOM 规范对源码空白的忠实建模。理解这一机制，有助于写出更健壮的节点遍历逻辑，并在调试时快速识别 childNodes 与 children 的行为差异。
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()); // ""（纯空白）const elementChildren = Array.from(section.childNodes)
.filter(node => node.nodeType === Node.ELEMENT_NODE);
console.log(elementChildren); // 等效于 section.children（但返回数组）