为何section.childNodes返回的NodeList存在额外text节点？

先明确两个属性的核心差异 #

• childNodes：返回元素的所有子节点，涵盖元素节点、文本节点、注释节点等所有Node类型，不会做任何过滤。
• children：只返回元素的子元素节点（即nodeType === 1的节点），自动排除文本、注释等非元素类型的节点。

额外text节点的来源 #

那些多余的text节点，本质是你HTML代码里的空白字符——包括换行符、空格、制表符这些用来格式化代码的字符。

浏览器解析HTML时，会把这些空白字符当作有效的文本节点处理，添加到父元素的子节点列表中。比如你的HTML结构大概率是这样的：

<section>
  <div class="parent"></div>
  <div class="parent"></div>
  <div class="parent-3"></div>
</section>

这里<section>标签后的换行、每个<div>之间的换行和缩进空格，都会被解析成独立的text节点，所以childNodes里就会出现7个节点（3个div + 4个空白文本节点）。

如果把代码写成无空白的紧凑形式：

<section><div class="parent"></div><div class="parent"></div><div class="parent-3"></div></section>

再打印section.childNodes，就只会得到3个div元素节点，不会有那些额外的text节点。

补充：手动过滤childNodes的元素节点 #

如果需要从childNodes里只保留元素节点，可以用简单的过滤逻辑：

const elementNodes = Array.from(section.childNodes).filter(node => node.nodeType === 1);

这个结果和section.children类似，但children是动态的HTMLCollection（DOM变化时会自动更新），而过滤后的是静态数组。

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