getElementsByClassName 및 AJAX

Question

getElementsByClassName() 및 querySelectorAll()에 뭔가가 누락 되었습니까?

파이어 폭스 9와 크롬 17 그리고 아마 모든 브라우저에서, AJAX 응답으로 실행될 때이 두 함수가 빈 배열을 반환하는 것으로 보입니다. 예를 보려면 다음 링크를 참조하십시오.

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> 

Answer 1

xml 문서로 작업 중이므로 특성을 처리하는 표준 DOM 메서드가 적용되지 않습니다. 코드에서

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 변환 또는 지글 지글를 사용하는 것이보다 쉬울 수 있습니다 하나 개의 옵션과 같이, XPath를 사용하는 것입니다. jQuery를 다른 곳에서 사용하기 때문에 $(jqXHR.responseXML.documentElement).find('.findme').length을 사용할 수 있습니다.