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:
<?php
header('Content-type: application/xml; charset=UTF-8');
echo "<?xml version="1.0" encoding="UTF-8"?> n";
?>
<!DOCTYPE html>
<html>
<head>
<title>I'm the XHR response</title>
</head>
<body>
<div class="clazz">xhr happiness</div>
<div id="x" class="y"></div>
</body>
</html>
can you please explain the following output in the Chrome console?
xhr.responseXML.getElementById('x')
<div id="x" class="y"></div>
xhr.responseXML.getElementsByClassName('y')
[]
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).
<html xmlns="http://www.w3.org/1999/xhtml">
Because it's XML, not HTML. You also won't find innerHTML properties on your nodes.
While getElementsByClassName() wont work, getElementsByTagName() will; and tags have Attributes.
var XMLtagDIV = xhr.getElementsByTagName('div');
var XMLclassY = [];
var counter = 0; //Keep class array incrementally uniform e.g. 0,1,2,3,4...
for(i=0; i<XMLtagDIV.length; i++)
{
if(XMLtagDIV[i].getAttribute('class') == 'y') {
counter++;
XMLclassY[counter] = XMLclassY; }
}
Now the array variable XMLclassY will act just as getElementsByClass(); should.
链接地址: http://www.djcxy.com/p/48224.html上一篇: 反向JSON.stringify？