node.getchildnodes 返回所有子节点（含文本、注释），getfirstchild 仅返回第一个子节点（可能是空白文本节点）；需通过 nodetype 过滤或使用 children、firstelementchild、closest 等现代 api 实现稳健 dom 导航。
Node.getChildNodes 和 getFirstChild 是 DOM 操作中用于遍历节点树的基础方法，但它们的行为有本质区别：前者返回 所有子节点（含文本、注释、元素）的 NodeList，后者只返回 第一个子节点（可能是空白文本节点）。实战中若不加判断直接使用，极易因忽略文本节点或空格导致导航逻辑断裂。
区分 nodeType：避开空白文本节点陷阱
HTML 中换行、缩进会生成 type=3 的 Text 节点。例如：
内容
其 div.firstChild 很可能是换行符对应的 Text 节点，而非 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6613" title="Rydberg Agent Node"><img
src="https://img.php.cn/upload/skill/000/000/081/179102717221814.jpg" alt="Rydberg Agent Node" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6613" title="Rydberg Agent Node" class="overflowclass">Rydberg Agent Node</a>
<p class="overflowclass">使用一条命令部署ProbeChain Rydberg测试网代理节点。自动注册为Agent(NodeType=1)，免gas，支持macOS/Linux/Windows。触发词：/r</p>
</div>
<a rel="nofollow" href="/xiazai/skill6613" title="Rydberg Agent Node" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 元素。正确做法是过滤 nodeType：
- 用
node.nodeType === Node.ELEMENT_NODE筛选真实元素节点 - 遍历
childNodes时跳过 type=3（Text）、type=8（Comment）等非元素节点 - 封装安全的
getFirstElementChild()（现代浏览器原生支持，IE 需 polyfill）
构建层级导航变量：用 parentNode + children 组合替代单向依赖
仅靠 getChildNodes 或 getFirstChild 无法稳健回溯或跨级定位。推荐组合使用：
-
el.parentElement安全获取父元素（比parentNode更可靠，自动跳过文本父节点） -
el.children返回仅含元素节点的 HTMLCollection，比childNodes更直观 - 通过
el.children[0]获取首个子元素，等价于el.firstElementChild - 需要精确索引时，先用
Array.from(el.children)转为数组再操作
实战导航逻辑：从目标节点向上/向下稳定寻址
例如查找「某个按钮的最近一层 .form-group 容器」：
- 不推荐：
btn.parentNode.parentNode—— 层级硬编码，结构一变即失效 - 推荐：
btn.closest('.form-group')（语义明确，自动向上匹配） - 若需向下找「容器内第一个 input」：
container.querySelector('input')或container.firstElementChild?.querySelector('input') - 需遍历所有直系子元素？用
for (const child of container.children)，避免误入文本节点
兼容性与现代替代方案
IE8+ 支持 firstElementChild、children、closest（需 polyfill），已大幅降低对原始 getChildNodes 的依赖：
-
Node.childNodes仍适用于需处理注释、CDATA 等特殊场景 -
getFirstChild()已被firstChild属性替代，且应配合 nodeType 判断 - 复杂导航建议优先用
querySelector/closest/matches，语义强、容错高
