JavaScript中childNodes的索引工作规则是什么？
2026-8-30
核心原因
首先纠正认知偏差：childNodes的索引是从0开始计数的。你出现取值不符合预期的核心原因是不了解childNodes的返回规则：它会返回父节点下的所有类型节点，不止是HTML标签对应的元素节点——标签之间因换行、缩进、空格产生的空白文本节点、HTML注释节点，全都会被计入索引序列。
以你给出的DOM结构为例：
<div> <h2>Name</h2> <h3>age</h3> <span class='fa fa-trash'></span> </div>
外层div的childNodes索引和节点的对应关系如下：
- 索引0：
<div>起始标签后到<h2>前的换行+缩进空白，属于文本节点，无可见内容 - 索引1：
<h2>Name</h2>元素节点，也就是你取[1]时拿到Name内容的节点，和你的运行结果完全匹配 - 索引2：
</h2>闭合标签后到<h3>前的换行+缩进空白，属于文本节点，无可见内容——这就是你取[2]拿不到h3的根本原因，你实际拿到的是这个空白文本节点 - 索引3：
<h3>age</h3>元素节点，也就是你原本想定位的age节点 - 索引4：
</h3>闭合标签后到<span>前的换行+缩进空白，属于文本节点 - 索引5：
<span class='fa fa-trash'></span>元素节点 - 索引6：
</span>闭合标签后到</div>前的换行+缩进空白，属于文本节点
更符合使用直觉的方案
如果只想获取HTML标签对应的元素节点，不需要考虑空白文本、注释的干扰，直接用children属性替代childNodes即可。children只会返回类型为元素的子节点，索引顺序和肉眼看到的标签排列顺序完全一致。
针对你的示例结构：
this.parentNode.children[0]对应h2节点this.parentNode.children[1]对应h3节点this.parentNode.children[2]对应span节点
如果场景要求必须使用childNodes，可以在遍历节点时通过nodeType属性过滤节点类型：nodeType === 1代表元素节点，nodeType === 3代表文本节点，nodeType === 8代表注释节点。
内容的提问来源于stack exchange，提问作者aquile hollins
相关产品推荐
相关产品推荐
