javascript - getElementsByClassName と AJAX

Question

getElementsByClassName() と querySelectorAll() で何か不足していますか?

Firefox 9 と Chrome 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>