getElementsByClassName和AJAX

Question

我是否缺少getElementsByClassName（）和querySelectorAll（）？

在Firefox 9和Chrome 17以及可能所有的瀏覽器中，似乎這兩個函數在AJAX響應中執行時都返回空數組。有關示例，請參閱以下鏈接。

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

我可以調用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> 

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轉換或使用灒。既然你在其他地方使用jQuery，你可以做$(jqXHR.responseXML.documentElement).find('.findme').length。