为何JavaScript中div的childNodes返回7个节点而非3个？

嗨，我来帮你理清楚这个困惑！问题出在childNodes的工作机制上——它会返回所有类型的子节点，不只是你写的<h1>元素标签，还包括浏览器解析出来的文本节点（比如换行、空格这些看不见的空白字符）。

具体分析你的HTML结构 #

你的div代码看起来是这样的（换行和空格会被浏览器解析）：

<div>
<h1 id="title">one</h1>
<h1 id="title2">two</h1>
<h1 id="title3">three</h1>
</div>

浏览器会把这些换行和缩进的空白字符转换成Text类型的节点，咱们数一下div里的所有子节点：

• div标签闭合后的换行+缩进 → 文本节点1
• <h1>one</h1> → 元素节点2
• 第一个h1后的换行+缩进 → 文本节点3
• <h1>two</h1> → 元素节点4
• 第二个h1后的换行+缩进 → 文本节点5
• <h1>three</h1> → 元素节点6
• 第三个h1后的换行 → 文本节点7

刚好7个节点，这就是你得到7个结果的原因！

解决方案：只获取元素节点 #

如果你只想拿到<h1>这类元素节点，有几种常用方法：

1. 使用children属性（仅返回元素节点）

const parent = document.getElementsByTagName("div")[0];
const children = parent.children;
for(let i = 0; i < children.length; i++){
  document.write("#" + i + " " + children[i].innerHTML + "<br>");
}

2. 遍历childNodes时过滤非元素节点
   元素节点的nodeType值为1，我们可以用这个条件过滤：

const parent = document.getElementsByTagName("div")[0];
const children = parent.childNodes;
for(let i = 0; i < children.length; i++){
  if(children[i].nodeType === 1){ // 只处理元素节点
    document.write("#" + i + " " + children[i].innerHTML + "<br>");
  }
}

3. 使用querySelectorAll直接选择子元素

const children = document.querySelectorAll("div > h1");
for(let i = 0; i < children.length; i++){
  document.write("#" + i + " " + children[i].innerHTML + "<br>");
}

内容的提问来源于stack exchange，提问作者asharpdesigner