title: Accessing XML DOM child nodes by name
body: <p>I want to access the textContent property of an XML object in JavaScript. The root item has several children which also have some children themselves. To get the children on the first level I just iterate through the childNodes Array of the root element. But to get the values of the "grandchilds" I would like to use something like <code>getElementsByTagName()</code>, which doesn't work. Currently I just iterate through all children again and check the nodeName property of each to get my values. <strong>Is there a way to get the child object by name?</strong></p>
  
  <p>XML (<strong>Notice: the XML document I get internally is unformatted, there are no whitespaces, there are no <em>#text</em> nodes</strong>):</p>
  
  <pre><code>&lt;root&gt;
    &lt;element&gt;
      &lt;child1&gt;content&lt;/child1&gt;
      &lt;child2&gt;content&lt;/child2&gt;
      &lt;child3&gt;content&lt;/child3&gt;
    &lt;/element&gt;
    &lt;element&gt;
      &lt;child1&gt;content&lt;/child1&gt;
      &lt;child2&gt;content&lt;/child2&gt;
      &lt;child3&gt;content&lt;/child3&gt;
    &lt;/element&gt;
  &lt;/root&gt;
  </code></pre>
  
  <p><strong>What I tried so far:</strong></p>
  
  <pre><code>xmlDoc = xmlhttp.responseXML;
  for(i = 0; i &lt; xmlDoc.documentElement.childNodes.length; i++)
  {
    key = xmlDoc.documentElement.childNodes[i];
    alert(key.getElementsByTagName('child1')[0].textContent);
  }
  </code></pre>
  
  <p>which results in an message box: <em>undefined</em> <br>
  and an console error: <em>TypeError: key.getElementsByTagName(...)[0] is undefined</em><br><br></p>
  
  <p>Browser: Firefox 26 <br><br></p>
  
  <p>Maybe it's a problem with the DOM Object, I create it the following way:</p>
  
  <pre><code>var xmlhttp;
  if (window.XMLHttpRequest)
  {
    xmlhttp=new XMLHttpRequest();
  }
  xmlhttp.onreadystatechange=function()
  {
    if(xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200)
    {
      xmlDoc = xmlhttp.responseXML;
  </code></pre>