Chrome DOM 中的空白文本节点答案

【问题标题】：whitespace text nodes in the Chrome DOMChrome DOM 中的空白文本节点
【发布时间】：2018-02-28 15:49:19
【问题描述】：

以下 HTML：

    <html>
      <body>
          <label>field a</label>
          <input  name="foo1" value=""/><br/>
          <label>field b</label><input name="foo2" value="" /><br/>
      </body>
    </html>

… 由于label 和第一个input 元素之间的空白，使字段的输入略微偏右。但是，查看 Chrome 中的 DOM 我看到了这一点：

即DOM 中没有文本节点的表示。由于浏览器使用额外的空间呈现它，我认为正在发生的事情是 DOM 中确实存在空格，但 DOM 查看器由于某种原因没有显示它。如果我理解正确，Firefox DevTools 实际上会显示空白文本节点（参见blog post）。 Chrome 有没有类似的东西？

【问题讨论】：

Firefox 确实显示它们。我已经喜欢这个可爱的功能很长时间了。
是的，刚刚确认 Firefox 73.0.1 (64bit) 有它们

标签： html google-chrome firefox dom

【解决方案1】：

我认为没有办法在 DOM 视图中显示它们。

但是，我注意到它们在辅助功能树中有些可检测到：

【讨论】：