getElementsByClassName and AJAX

Question

getElementsByClassName and AJAX

3

getElementsByClassName()和querySelectorAll()在处理AJAX响应时是否有什么需要注意的吗？

在Firefox 9、Chrome 17和可能所有浏览器中，当对AJAX响应执行这两个函数时，似乎都会返回一个空数组。可以参考以下链接进行查看。

我可以调用document.getElementsByClassName('findme')或anyElement.getElementsByClassName('findme')来查找当前页面DOM中的任何元素，但由于某种原因，在处理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>

- Nicholas Albion

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- glortho · Accepted Answer

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