title: Best way to get child nodes
body: <p>I was wondering, JavaScript offers a variety of methods to get the first child element from any element, but which is the best? By best, I mean: most cross-browser compatible, fastest, most comprehensive and predictable when it comes to behaviour. A list of methods/properties I use as aliases:</p>
  
  <pre><code>var elem = document.getElementById('container');
  var child = elem.children[0];
  var child = elem.firstElementChild; // == children[0]
  </code></pre>
  
  <p>This works for both cases:</p>
  
  <pre><code>var child = elem.childNodes[0]; // or childNodes[1], see below
  </code></pre>
  
  <p>That’s in case of forms, or <code>&lt;div&gt;</code> iteration. If I might encounter text elements:</p>
  
  <pre><code>var child = elem.childNodes; // treat as NodeList
  var child = elem.firstChild;
  </code></pre>
  
  <p>As far as I can work out, <code>firstChild</code> uses the NodeList from <code>childNodes</code>, and <code>firstElementChild</code> uses <code>children</code>. I’m basing this assumption on the MDN reference:</p>
  
  <blockquote>
    <p><code>childNode</code> is a reference to the first child element of the element node, or <code>null</code> if there isn’t one.</p>
  </blockquote>
  
  <p>I’m guessing that, in terms of speed, the difference, if any, will be next to nothing, since <code>firstElementChild</code> is effectively a reference to <code>children[0]</code>, and the <code>children</code> object is already in memory anyway.</p>
  
  <p>What does throw me, is the <code>childNodes</code> object. I’ve used it to take a look at a form, in a table element. While <code>children</code> lists all form elements, <code>childNodes</code> also seems to include whitespace from the HTML code:</p>
  
  <pre><code>console.log(elem.childNodes[0]);
  console.log(elem.firstChild);
  </code></pre>
  
  <p>Both log <code>&lt;TextNode textContent="\n "&gt;</code></p>
  
  <pre><code>console.log(elem.childNodes[1]);
  console.log(elem.children[0]);
  console.log(elem.firstElementChild);
  </code></pre>
  
  <p>All log <code>&lt;input type="text"</code>…<code>&gt;</code>. How come? I’d understand that one object would allow me to work with the “raw” HTML code, while the other sticks to the DOM, but the <code>childNodes</code> element seems to work on both levels.</p>
  
  <p>To get back to my initial question, my guess would be: if I want the most comprehensive object, <code>childNodes</code> is the way to go, but because of its comprehensiveness, it might not be the most predictable in terms of it returning the element I want/expect at any given moment. Cross-browser support might also prove to be a challenge in that case, though I could be wrong.</p>
  
  <p>Could anyone clarify the distinction between the objects at hand? If there is a speed difference, however negligible, I’d like to know, too. If I’m seeing this all wrong, feel free to educate me.</p>
  
  <hr>
  
  <p>PS: Please, please, I like JavaScript, so yes, I want to deal with this sort of thing. Answers like “jQuery deals with this for you” are not what I’m looking for, hence no <a href="/questions/tagged/jquery" class="post-tag" title="show questions tagged &#39;jquery&#39;" rel="tag">jquery</a> tag.</p>