Question

我是否遗漏了getElementsByClassName（）和querySelectorAll（）的内容？

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

我可以为当前页面的DOM中的任何元素调用document.getElementsByClassName（＆＃39; findme＆＃39;）或anyElement.getElementsByClassName（＆＃39; findme＆＃39;），但由于某种原因，它不会＃39;似乎可以处理为AJAX请求返回的XML Document。请注意，getElementsByTagName适用于AJAX，在Firebug中，您可以看到元素具有＆＃34; findme＆＃34;类。

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>

Answer 1

由于您正在使用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。

getElementsByClassName和AJAX

1 个答案: