childNodes返回所有子节点（含文本、注释等），children仅返回元素节点；前者包含空白文本节点，后者自动过滤非元素内容，更简洁安全。
childNodes 和 children 都是用来获取元素子节点的属性，但它们返回的内容完全不同：childNodes 包含所有类型的子节点（元素、文本、注释等），而 children 只返回元素节点（即 HTML 标签），自动过滤掉文本节点和注释节点。
childNodes 会包含空白文本节点
HTML 中换行、缩进、空格在 DOM 解析时会被当作文本节点（nodeType === 3）。比如：
<div><p>Hello</p>
</div>
这个 div 的 childNodes 实际包含 3 个节点：一个换行+空格组成的文本节点、一个 <p> 元素节点、再一个换行文本节点。用 div.childNodes.length 得到的是 3，不是 1。
判断是否为元素节点可检查 node.nodeType === 1 或用 node instanceof Element。
children 只返回元素子节点
children 是只读的 HTMLCollection，里面全是 Element 类型节点，完全忽略文本、注释等非元素内容。上面例子中 div.children.length 就是 1，且 div.children[0] 就是那个 <p> 元素。
它不包含空格、换行、注释，也不响应动态插入的文本节点 —— 这正是它“干净”的原因。
实际使用建议
- 想遍历所有子内容（包括空格、换行、注释）—— 用 childNodes，并手动过滤：
node.nodeType === 1筛出元素，=== 3筛出文本 - 只想操作子标签（最常见场景）—— 直接用 children，简洁安全，兼容性好（IE6+）
- 需要现代数组方法（如 map、filter）时，可转成数组：
Array.from(element.children)或[...element.children] - 注意 children 不是 NodeList，没有 forEach 方法（原生 HTMLCollection），需转换后再调用
一个小验证技巧
快速对比两者差异，可以在控制台运行：
const el = document.querySelector('div');console.log('childNodes:', el.childNodes);
console.log('children:', el.children);
console.log('纯元素数量:', el.children.length);
console.log('所有节点数量:', el.childNodes.length);
观察输出，就能直观看到文本节点如何“悄悄混入”childNodes。
