children只获取元素节点，天然过滤文本和注释节点；childnodes需配合nodetype===1判断才能过滤非元素节点。
用 childNodes 获取所有子节点（含文本、注释）
直接读取 childNodes 是最基础的方式，但它返回的是包含文本节点、注释节点和元素节点的混合 NodeList。很多情况下你只想要标签（即元素节点），但如果不加过滤，childNodes 会把换行符、空格这些解析为 Text 节点，导致结果里混着一堆 #text。
常见错误现象：element.childNodes.length 比预期大很多，遍历发现大量 nodeType === 3 的节点。
-
node.nodeType === 1才是元素节点（即你想要的“子标签”） - 如果 HTML 写在一行里（无换行缩进），
childNodes可能刚好全是元素；但实际开发中几乎不可能这么写 - 兼容性没问题，所有现代浏览器都支持，且返回的是实时 NodeList（不是静态副本）
用 children 获取纯元素子标签（推荐）
children 是专门为此设计的属性——它只返回子元素节点，自动跳过文本、注释等非元素节点。语义清晰、行为确定，是获取“所有子标签”的首选。
使用场景：遍历 DOM 结构做样式批量操作、动态插入/移除子元素、判断容器是否为空（element.children.length === 0）。
-
children返回的是HTMLCollection，不是数组，不能直接用map或filter - 需要数组方法时，得先转成数组：
Array.from(element.children)或[...element.children] - IE9+ 全支持，老 IE（8-）不支持
children，但基本已不用考虑
用 querySelectorAll 精确控制选择范围
当你要的不只是“直接子标签”，而是满足某些条件的子标签（比如带特定 class、或某类标签名），querySelectorAll 更灵活。
性能影响：相比 children，querySelectorAll 是静态快照，且需解析 CSS 选择器，开销略高；但对几十个子元素来说几乎无感。
- 获取所有直接子元素：
element.querySelectorAll("> *") - 获取所有子
div标签：element.querySelectorAll("div")（包括嵌套的） - 获取直接子
div：element.querySelectorAll("> div") - 注意：
"> *"不匹配伪元素，也不匹配文本节点——这点和children行为一致
为什么不用 getElementsByTagName("*")
getElementsByTagName("*") 返回的是整个子树的所有元素（包括孙子、曾孙……），不是“子标签”。它容易被误用，尤其初学者看到 “*” 就以为是“当前层级全部”。
常见错误现象：本想隐藏直接子按钮，却把所有后代按钮都隐藏了；或者统计“子元素数量”时得到远超预期的值。
- 它返回的是实时
HTMLCollection，DOM 变动会反映在集合里 - 没有层级限制，无法表达“仅直接子元素”这个语义
- 除非你明确需要递归遍历整棵子树，否则别用它替代
children
children；只有当你需要过滤或跨层级时，才切换到 querySelectorAll。而 childNodes 和 getElementsByTagName("*") 都容易引入隐性 bug，除非有特殊需求，否则绕开更省心。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
