使用node.firstChild()获取#root子元素时出现#text的问题求助

嘿，这个问题我之前也碰到过，算是DOM解析里一个容易被忽略的小细节，我来给你拆解清楚：

1. 什么是#text节点？ #

你说的#text其实是DOM中专门用来表示空白文本节点的类型——这里的文本不是指你写的可见内容，而是那些你在代码里为了排版加的空格、换行符、制表符这类“看不见”的空白字符。浏览器在解析HTML的时候，会把标签之间的所有空白都转换成独立的#text节点，虽然有时候开发者工具的Elements面板会默认折叠这些节点（你可能没留意到），但它们在DOM树里是真实存在的。

2. 为什么它会成为#root的firstChild？ #

这几乎可以肯定是因为你的#root容器和里面第一个<div class="each-resul...">标签之间存在空白字符。举个例子，你的代码可能是这样写的：

<div id="root">
  <div class="each-resul...">...</div>
</div>

这里#root的闭合标签和下面的div开头标签之间有换行和缩进的空格，这些空白就被浏览器解析成了#text节点，并且排在了div节点的前面，所以当你调用node.firstChild时，拿到的就是这个空白文本节点，而不是你预期的div。

验证&解决小技巧 #

• 验证方法：在控制台里执行document.querySelector('#root').childNodes，你就能看到所有子节点列表，那个#text节点和目标div都会显示出来。
• 解决方法：
  • 把HTML代码写成紧凑形式，去掉标签间的空白：<div id="root"><div class="each-resul...">...</div></div>
  • 改用node.firstElementChild代替firstChild——这个方法会自动跳过所有文本节点，直接获取第一个元素类型的子节点，正好是你想要的div。

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