title: IE10 inserting blank text DOM entries
body: <p>I have a piece of Javascript code that locates the single table in the DOM then tries to manipulate its first child, the <code>thead</code> (actually, it iterates though the children of that child, the <code>tr</code> entries but that's not important to the question). The code to do this is:</p>
  
  <pre><code>var tableNode = document.getElementById("table").firstChild;
  </code></pre>
  
  <p>This works fine in Firefox ESR (10/17/24) and IE9 but fails in IE10, and the reason appears to be because IE10 is inserting weird DOM entries and it's one of those I'm picking up with <code>firstChild</code> instead of the desired <code>thead</code>. I base this on the DOM dump below along with the fact that <code>tableNode.data</code> is set to the string type.</p>
  
  <p>The DOM in IE10 compatibility mode (where it also works) looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/1LOl0.jpg" alt="enter image description here"></p>
  
  <p>and you can see that the DOM indeed looks sensible. However, examining the DOM in normal IE10 mode shows this:</p>
  
  <p><img src="https://i.stack.imgur.com/NkF6A.jpg" alt="enter image description here"></p>
  
  <p>For what it's worth, Chrome gives me:</p>
  
  <p><img src="https://i.stack.imgur.com/HiTGs.jpg" alt="enter image description here"></p>
  
  <p>and FF17esr gives me:</p>
  
  <p><img src="https://i.stack.imgur.com/7ybR7.jpg" alt="enter image description here"></p>
  
  <p>neither of which seem to have the empty text elements.</p>
  
  <p>Now, I can run the site in compatibility mode but that's an annoying thing to have to tell all our customers. I can also apparently add the hideous:</p>
  
  <pre><code>&lt;meta http-equiv="X-UA-Compatible" content="IE=9"&gt;
  </code></pre>
  
  <p>to my output but I'm not entirely certain what other effects that may have.</p>
  
  <p>I'd like to understand first <em>why</em> IE10 is adding these nodes whereas IE9/FF/IE10compat aren't. There are some discussions I've found stating that whitespace in the HTML may be causing it but it seems to me that this shouldn't result in random nodes being created and, in any case, I don't think I <em>have</em> any superfluous white space. Although I should mention that the <em>value</em> of <code>tableNode.data</code> mentioned above as type string is actually <code>\n</code>, meaning that the newline at the end of the line may be creating this DOM entry.</p>
  
  <p>But, to be honest, that seems ludicrous. HTML is supposed to ignore whitespace outside of tags as far as I'm aware, or at least fold it into a single element. I find it hard to believe that something like:</p>
  
  <pre><code>&lt;tag&gt;line 1&lt;/tag&gt;
  &lt;tag&gt;line 2&lt;/tag&gt;
  </code></pre>
  
  <p>would result in <em>three</em> DOM entries, <code>tag</code>, <code>empty node</code> and <code>tag</code> just because there's a newline between them.</p>
  
  <p>Any ideas on how to best solve this? Am I going to have to modify my Javascript code to skip these DOM entries?</p>