children 返回只含元素节点的 htmlcollection，忽略文本和注释节点；是“活”的但不支持数组方法，遍历需用 for 循环或转数组。
children 返回的是 Element 类型的子节点，不是所有子节点
children 是 DOM 元素对象上的只读属性，返回一个 HTMLCollection，里面只包含**元素节点（Element）**，忽略文本节点、注释节点等。比如 <div>hello<span>world</span>
</div> 中，div.children 只有 <span></span> 这一个元素，不会把 "hello" 当作子元素。
常见错误是以为它和 childNodes 一样能拿到文本内容 —— 实际上拿不到。如果页面里有换行或空格，childNodes 会包含多个 Text 节点，但 children 完全无视它们。
children 不实时响应 DOM 变化，但 HTMLCollection 是“活”的
虽然 HTMLCollection 是“活”的（即 DOM 增删子元素后，再次访问 children.length 会反映最新数量），但它**不支持数组方法**，不能直接用 .map()、.forEach() 或展开运算符（除非先转成数组）。
实操建议：
- 需要遍历时，写
for (let i = 0; i 最稳妥 - 想用数组方法：用
[...el.children]或Array.from(el.children) - 注意 IE8– 不支持扩展运算符，老项目慎用解构
children 在 SVG 或 Shadow DOM 中行为不同
在普通 HTML 元素上，children 表现一致；但在 <svg></svg> 内部，某些浏览器（如旧版 Safari）对 children 的处理可能漏掉某些元素节点，更推荐用 childElementCount + children[i] 显式索引访问。
对于 Shadow Root（如 element.shadowRoot），children 同样可用，但前提是 shadow root 是 open 模式；closed 模式下无法访问任何属性，包括 children。
替代方案：什么时候该用 children，什么时候该用 querySelectorAll
children 适合快速获取**直接子元素集合**，性能略优于 querySelectorAll，且无需写选择器。但它无法过滤（比如只取 class="item" 的子元素）。
实操判断依据：
- 只要全部直系子元素 → 用
el.children - 要带条件筛选（类名、属性、标签名组合）→ 用
el.querySelectorAll(':scope > .item')（注意:scope确保是直系） - 需要兼容 IE8（已极少见）→ 只能用
children，因为querySelectorAll不支持
别忘了：如果父元素本身没子元素，children.length 是 0，但 children 对象本身永远不会是 null 或 undefined —— 这个空集合容易被误判为“获取失败”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
