children只获取元素节点，天然过滤文本和注释节点，语义清晰、兼容性好；childnodes需配合nodetype判断（1为元素节点）才能过滤非元素节点。
用 childNodes 遍历时会包含文本节点（如换行、空格），而 children 只返回元素节点，天然过滤掉文本节点和注释节点——这是最直接的解决方案。
children：只获取元素子节点，最简单可靠
children 是只读的 HTMLCollection，里面全是 Element 类型节点，自动跳过文本节点、注释节点等。适合绝大多数“遍历子元素”的场景。
- 支持 for 循环、for...of、Array.from 转数组后使用 map/filter 等
- 兼容性好（IE9+），语义清晰，无需手动判断节点类型
- 示例：
hello
worlddocument.getElementById('box').children返回长度为 2 的集合，只有<p></p>和<span></span>
childNodes + 节点类型判断：需要保留非元素节点时才用
如果确实要处理 childNodes（比如需识别文本内容或注释），就得手动过滤。关键看 node.nodeType：
-
node.nodeType === 1→ 元素节点（Element）✅ -
node.nodeType === 3→ 文本节点（Text）❌（通常要跳过） -
node.nodeType === 8→ 注释节点（Comment）❌（一般也跳过） - 常用写法：
Array.from(el.childNodes).filter(node => node.nodeType === 1)
或循环中：for (const node of el.childNodes) { if (node.nodeType === 1) { /* 处理元素 */ } }
现代替代方案：querySelectorAll('*')
如果目标是获取所有后代元素（不只是直接子元素），querySelectorAll 更直观：
-
el.querySelectorAll(':scope > *')→ 直接子元素（类似children） -
el.querySelectorAll('*')→ 所有后代元素（不含文本） - 返回静态 NodeList，支持 forEach、map 等，语义明确，无文本节点干扰
注意 whitespace 文本节点的来源
HTML 中的换行和缩进，在 DOM 解析后常生成 Text 节点。例如：
A
B
这个结构里 childNodes 实际包含 5 个节点：换行+空格组成的 Text、<span></span>、换行+空格、<em></em>、换行+空格。用 children 就只看到两个元素。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
