咨询：JavaScript DOM中h1的childNodes为何出现#text节点

我在编写JavaScript代码时遇到了问题，我的HTML代码如下：

<h1>
When
<!-- Green highlight effect -->
<span class="highlight">banking</span>
meets <br/>
<span class="highlight">minimalist</span>
</h1>

当我获取该h1元素的子节点时，发现NodeList中多处存在#text节点，例如document.querySelector('h1').childNodes[2]。我对此感到疑惑：注释后紧跟的是span元素，为何该位置会出现文本节点？我想要获取子节点，但其中存在一些预期之外的元素，希望有人能解释原因。

这是因为浏览器解析HTML时，会把元素之间的**空白字符（换行、空格、制表符）**当作文本节点处理。

看你的代码结构：

• <h1>标签后的换行是第一个文本节点；
• When后面的换行是第二个文本节点；
• 注释<!-- Green highlight effect -->后面的换行就是你看到的childNodes[2]对应的文本节点；
• </span>与meets之间的换行和空白也是文本节点，以此类推。

这些空白字符在页面渲染时通常不会显示，但DOM会完整保留它们作为文本节点。

如果只想获取元素类型的子节点，有两种简单方法：

• 使用children属性：document.querySelector('h1').children只会返回元素节点，自动排除文本、注释这类节点；
• 使用querySelectorAll筛选：document.querySelectorAll('h1 > *')可以直接获取h1的所有直接子元素。

内容的提问来源于stack exchange，提问作者Bilal Zahid Shah