Why getElementsByClassName doesn't work on xhr reponseXML
<p>Why xhr.responseXML.getElementsByClassName('clazz') doesn't work? </p>

<p>Here is the js:</p>

<pre>
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function() {
         if (xhr.readyState == 4) {
            var happiness = xhr.responseXML.getElementsByClassName('clazz');

            //Uncaught TypeError: Cannot read property 'innerHTML' of undefined
            console.log("happiness ? " + happiness[0].innerHTML);
         }
    };

    //xhr.overrideMimeType("application/xml");
    xhr.open("GET", "xhr.php", true);
    xhr.send(null);
</pre>

<p>xhr.php contains the following:</p>

<pre>
&lt;?php
<br/>header('Content-type: application/xml; charset=UTF-8');
<br/>echo &quot;&lt;?xml version=\&quot;1.0\&quot; encoding=\&quot;UTF-8\&quot;?&gt; \n&quot;;
<br/>?&gt;
<br/>
<br/>&lt;!DOCTYPE html&gt;
<br/>&lt;html&gt;
<br/>&lt;head&gt;
<br/>&lt;title&gt;I'm the XHR response&lt;/title&gt;
<br/>&lt;/head&gt;
<br/>&lt;body&gt;
<br/>
<br/>&lt;div class=&quot;clazz&quot;&gt;xhr happiness&lt;/div&gt;
<br/>
<br/>&lt;div id=&quot;x&quot; class=&quot;y&quot;&gt;&lt;/div&gt;
<br/>
<br/>&lt;/body&gt;
<br/>&lt;/html&gt;
</pre>

<p>can you please explain the following output in the Chrome console?</p>

<pre>
xhr.responseXML.getElementById('x')
&lt;div id=&quot;x&quot; class=&quot;y&quot;&gt;&lt;/div&gt;

xhr.responseXML.getElementsByClassName('y')
[]
</pre>
