javascript - Why getElementsByClassName doesn't work on xhr reponseXML

Why xhr.responseXML.getElementsByClassName('clazz') doesn't work?

Here is the js:

    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);

xhr.php contains the following:

header('Content-type: application/xml; charset=UTF-8');

echo " \n";

?>












xhr happiness

can you please explain the following output in the Chrome console?

xhr.responseXML.getElementById('x')



xhr.responseXML.getElementsByClassName('y')
[]

Answer

xhr.responseXML is XML nodes and not HTML elements which means that class attribute has not a special meaning.

However, when I added xmlns declaration to the html tag, the getElementsByClassName on responseXML just worked (tested on Chrome).