空格被列为子节点，但文本不是

Question

我的代码中的换行符被列为子节点（我已在网上发现这是正常的），因此以下元素实际上有5个子节点，其中3个是空格：

<tbody id="test">
    <tr></tr>
    <tr></tr>   
</tbody>

如果我将它全部编码在一行中，这个问题就会消失。

让它消失的另一个奇怪的方法是在那里放一些实际的文本，并且由于某种原因它根本没有在DOM中注册。例如，以下元素只有2个子元素（表行）：

<tbody id="test">x
    <tr></tr>x
    <tr></tr>x  
</tbody> 

有人可以解释为什么会这样吗？

Answer 1

这是因为您将文本放在无法显示的位置：作为tbody元素的直接子元素。由于这是无效的，浏览器会重新定位它。它不会被遗漏，但你可以在表之前或之后找到它（取决于浏览器;当面对无效的HTML时，浏览器可以做任何它喜欢的事情。）

Chrome将其放在桌子前面，例如：

table {
  border: 1px solid black;
}

<table>
  <tbody id="test">x
      <tr></tr>x
      <tr></tr>x  
  </tbody> 
</table>