为什么id为third的ul列表的childNodes数量为7而非预期的3个？

问题原因 #

childNodes 接口的设计本身就是返回目标元素的所有子节点，包含元素节点、文本节点、注释节点等所有节点类型。你看到的#text节点，就是HTML代码中<ul>标签与第一个<li>之间、各个<li>标签之间、最后一个<li>与</ul>之间的换行、缩进空格被浏览器解析生成的空白文本节点。
你提供的HTML结构刚好产生4个空白文本节点，加上3个<li>元素节点，总数量就是7，和你统计的结果完全吻合。

解决方法 #

如果只需要获取子元素节点，可选用以下两种方案：

• 替换使用children属性：children是专门用于返回子元素节点的接口，会自动过滤文本、注释等非元素节点，执行document.getElementById('third').children得到的长度就是预期的3，对应3个<li>元素。
• 手动过滤childNodes结果：如果必须使用childNodes，可以遍历节点列表，仅保留nodeType === 1的节点（Node.ELEMENT_NODE常量值为1，对应元素节点），示例代码如下：

const thirdUl = document.getElementById('third')
const childElements = Array.from(thirdUl.childNodes).filter(node => node.nodeType === 1)
console.log(childElements.length) // 输出3

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