document是dom树的根节点，非html；childnodes包含所有子节点（含文本、注释等），故长度常超预期；children仅返回元素节点，更安全可靠。
document 是 DOM 树的根节点，所有其他节点都从它派生而来； 是文档中第一个元素节点，但不是根节点 —— 这点容易被误读。
为什么 childNodes 返回的长度经常比预期多？
因为 childNodes 包含所有类型的子节点：元素节点、文本节点（包括换行和空格）、注释节点。HTML 中标签之间的空白符会被解析为 Text 节点（nodeType === 3）。
- 例如
<div> <p>A</p> <p>B</p> </div>在紧凑写法下，div.childNodes.length可能是 2（两个<p></p>）；但若换行缩进，可能变成 5（p+ 3 个文本节点） - 想只获取元素子节点？改用
children属性，它过滤掉非元素节点 - 判断是否为纯文本节点：
node.nodeType === Node.TEXT_NODE（即3）
parentNode 和 parentElement 的区别在哪？
两者都指向“上一级”，但行为不同：
-
parentNode总是返回父级节点，可能是Document、Element或DocumentFragment -
parentElement只在父节点是元素时才返回值，否则返回null—— 比如文本节点的父节点是<p></p>，那parentElement就是那个<p></p>；但<p></p>的父节点如果是Document，parentElement就是null - 安全取父元素时优先用
parentElement，避免后续调用.querySelector等方法时报错
遍历兄弟节点时，nextSibling 为什么常返回 undefined 或空白文本节点？
因为默认的 nextSibling / previousSibling 不区分类型，遇到换行或空格就会停在文本节点上。
- 想跳过非元素节点？用
nextElementSibling和previousElementSibling - 它们只返回元素节点，
null表示没有符合条件的兄弟元素 - 注意：IE9+ 支持
Element版本，但 IE8 及更早只支持原始版本，需做兼容判断
DOM 树的真实结构远比 HTML 源码“看起来”复杂 —— 文本节点、注释、隐藏空白都会参与构成树形关系。真正动手操作前，先用 console.dir(node) 看一眼 childNodes 列表，比凭空猜要可靠得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
