whitespace text nodes in the Chrome DOM

Viewed 1124

The below HTML:

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

… renders the input of field a slightly off to the right due to the whitespace between the label and the first input element. However, looking at the DOM in Chrome I see this:

enter image description here

I.e. there is no representation of the text node in the DOM. Since the browser renders it with the extra space I think what's happenning is that a whitespace is indeed present in the DOM but the DOM viewer for some reason does not display it. If I understand correctly Firefox DevTools do in fact display whitespace text nodes (see this blog post). Is there anything similar for Chrome?

1 Answers

I don't think there is a way to display them in the DOM view.

However, I've noticed they are somewhat detectable in the Accessibility Tree:

enter image description here

Related