getElementsByClassName 和 AJAX

我是否缺少 getElementsByClassName() 和 querySelectorAll() 的某些内容？

在 Firefox 9 和 Chrome 17 以及可能所有浏览器中，这两个函数在 AJAX 响应上执行时似乎都会返回一个空数组。请参阅以下链接了解示例。

http://jsfiddle.net/r8ryr/5/ http://jsfiddle.net/r8ryr/5/

我可以为当前页面 DOM 中的任何元素调用 document.getElementsByClassName('findme') 或 anyElement.getElementsByClassName('findme') ，但由于某种原因，它似乎不适用于为 AJAX 返回的 XML 文档要求。请注意，getElementsByTagName 适用于 AJAX，在 Firebug 中，您可以看到元素具有“findme”类。

var inMem = document.createElement('div');
var findme1 = document.createElement('div');
var findme2 = document.createElement('div');
findme1.className = 'findme';
findme2.className = 'findme';
inMem.appendChild( findme1 );
inMem.appendChild( findme2 );

$('#inMem').html( 'found ' + inMem.getElementsByTagName('div').length + 
            ' divs in the detached div<br/>' +
        'found ' + inMem.getElementsByClassName('findme').length + 
            ' findme elements by ClassName<br/>' +
        'found ' + inMem.querySelectorAll('.findme').length + 
            ' findme elements using querySelectorAll()');


var inDoc = document.getElementById('inDoc');
inDoc.innerHTML = 'found ' + inDoc.getElementsByTagName('div').length + 
            ' divs in the doc<br/>' +
        'found ' + inDoc.getElementsByClassName('findme').length + 
            ' findme elements by ClassName<br/>' +
        'found ' + inDoc.querySelectorAll('.findme').length + 
            ' findme elements using querySelectorAll()';


$.post( '/echo/xml/', 
    {xml:'<div id="wrapper"><div class="findme" id="findme1">findme 1</div><div class="findme">findme 2</div></div>'},
    function(data, textStatus, jqXHR) {
        data = jqXHR.responseXML.documentElement;
        var msg = 'found ' + data.getElementsByTagName('div').length + 
                ' divs in the AJAX response, <br/>' +
            'found ' + data.getElementsByClassName('findme').length + 
                ' findme elements by ClassName<br/>' +
            'found ' + data.querySelectorAll('.findme').length + 
                ' findme elements using querySelectorAll()<br/>' +
            'The class name of the first div: ' + data.firstElementChild.className + 
                ' (className) or ' + data.firstElementChild.attributes['class'].value + ' (attributes["class"].value)';

        $('#ajax').html(msg);
    }
);



<h2>In-Memory</h2>
<div id="inMem"></div>

<h2>In HTML Document</h2>
<div id="inDoc">
  <div class="findme"></div>
  <div class="findme"></div>
</div>

<h2>AJAX XML Response</h2>
<div id="ajax">wait...</div>

由于您正在使用 xml 文档，因此处理属性的标准 DOM 方法不适用。一种选择是使用 XPath，如下所示：

data.evaluate("count(//div[@class='findme'])", data.documentElement, null, XPathResult.NUMBER_TYPE, null).numberValue

在你的代码中：

$.post( '/echo/xml/', 
    {xml:'<div id="wrapper"><div class="findme" id="findme1">findme 1</div><div class="findme">findme 2</div></div>'},
    function(data, textStatus, jqXHR) {
        data = jqXHR.responseXML;
        var msg = 'found ' + data.getElementsByTagName('div').length + ' divs in the AJAX response, <br/>' + 
                  'found ' + data.evaluate("count(//div[@class='findme'])", data.documentElement, null, XPathResult.NUMBER_TYPE, null).numberValue + ' findme elements by ClassName<br/>'

        $('#ajax').html(msg);
    }
);

但从 XML 转换或使用 Sizzle 可能更容易。既然你在其他地方使用 jQuery，你可以这样做$(jqXHR.responseXML.documentElement).find('.findme').length.