HTML中文档DOM的表示：同级文本节点——浏览器是否插入换行文本节点？

咱们先直接给结论：是的，浏览器确实会把HTML源码中元素之间的空白字符（包括换行、空格、制表符等）解析成独立的DOM文本节点，这也是@Bergi那段表述的核心依据。

具体到你提到的例子 #

看这段HTML：

<img src="something"> <span>

浏览器解析后的DOM结构并不是简单的img→span，而是会在两者之间插入一个空白文本节点——它的nodeValue就是源码里img闭合标签和span标签之间的换行加空格（也就是"\n "）。

所以当你执行类似document.querySelector('img').nextSibling的时候，拿到的会是这个空白文本节点，而不是<span>元素，这就是@Bergi说“x.nextSibling大概率不是span”的原因。

为什么会有这种机制？ #

这是HTML解析器的标准行为：HTML源码中的空白字符（除了某些特殊场景，比如<pre>标签内、或者元素内部的连续空白会被合并）会被保留为DOM文本节点，目的是尽量还原源码中的排版逻辑。但这些空白文本节点通常不会影响页面渲染（浏览器会自动合并连续的空白进行渲染），却很容易让DOM操作初学者踩坑。

怎么避开这个“坑”？ #

如果你想直接获取下一个元素节点而不是文本节点，可以用nextElementSibling替代nextSibling，它会自动跳过所有非元素类型的节点（包括空白文本节点、注释节点等）。

另外，也可以在写HTML的时候把元素紧挨着写，比如：

<img src="something"><span>

这样元素之间没有空白字符，浏览器就不会生成对应的文本节点了。

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