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

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>