getElementsByClassName方法和AJAX [英] getElementsByClassName and AJAX

问题描述

我缺少的东西与getElementsByClassName方法（）和querySelectorAll（）？

在火狐9和Chrome 17，可能所有的浏览器，似乎当一个Ajax响应执行这两个函数返回一个空数组。请参阅以下链接中的例子。

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

我可以调用document.getElementsByClassName（'findme'）或anyElement.getElementsByClassName（findme'）在当前页面的DOM中的任何元素，但由于某些原因，它似乎并没有工作，返回的XML文档为AJ​​AX请求。需要注意的是的getElementsByTagName适用于AJAX，你可以在Firebug看到的元素有findme级。

  VAR inMem = document.createElement方法（'格'）;
VAR findme1 = document.createElement方法（'格'）;
VAR findme2 = document.createElement方法（'格'）;
findme1.className ='findme';
findme2.className ='findme';
inMem.appendChild（findme1）;
inMem.appendChild（findme2）;

$（'＃inMem）。HTML（'发现'+ inMem.getElementsByTagName（'格'）。长度+
            '的div中分离DIV＆LT; BR /＆GT; +
        '发现​​'+ inMem.getElementsByClassName（'findme）。长度+
            findme元素通过类名＆LT; BR /＆GT; +
        '发现​​'+ inMem.querySelectorAll（'。findme）。长度+
            ）使用querySelectorAll（）findme元素;


变种inDoc =的document.getElementById（'inDoc'）;
inDoc.innerHTML ='发现'+ inDoc.getElementsByTagName（'格'）。长度+
            的div在doc＆LT; BR /＆GT; +
        '发现​​'+ inDoc.getElementsByClassName（'findme）。长度+
            findme元素通过类名＆LT; BR /＆GT; +
        '发现​​'+ inDoc.querySelectorAll（'。findme）。长度+
            使用querySelectorAll findme元素（）';


.post的$（'/回声/ XML /'，
    {XML：'＆LT; D​​IV ID =包装＆GT;＆LT; D​​IV CLASS =findmeID =findme1＆GT; findme 1＆LT; / DIV＆GT;＆LT; D​​IV CLASS =findme＆GT; findme 2'; / DIV＆GT ;＆LT; / DIV＆GT;}，
    功能（数据，textStatus，jqXHR）{
        数据= jqXHR.responseXML.documentElement;
        VAR味精='发现'+ data.getElementsByTagName（'格'）。长度+
                的div在Ajax响应，＆LT; BR /＆GT; +
            '发现​​'+ data.getElementsByClassName（'findme）。长度+
                findme元素通过类名＆LT; BR /＆GT; +
            '发现​​'+ data.querySelectorAll（'。findme）。长度+
                使用querySelectorAll（）LT findme元素; BR /＆GT; +
            第一个div的类名：'+ data.firstElementChild.className +
                。（类名）或+ data.firstElementChild.attributes ['类']值+（属性[阶级]值。）;

        $（'＃阿贾克斯）HTML（MSG）;
    }
）;



＆LT; H2＆gt;在内存＆LT; / H＆GT;
＆LT; D​​IV ID =inMem＆GT;＆LT; / DIV＆GT;

＆LT; H2＆gt;在HTML文档＆LT; / H＆GT;
＆LT; D​​IV ID =inDoc＆GT;
  ＆LT; D​​IV CLASS =findme＆GT;＆LT; / DIV＆GT;
  ＆LT; D​​IV CLASS =findme＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;

＆LT; H2＆GT; AJAX XML响应＆LT; / H＆GT;
＆LT; D​​IV ID =AJAX＆GT;等待...＆LT; / DIV＆GT;
 

解决方案

既然你正在使用的XML文档，处理属性的标准DOM方法并不适用。一种选择是使用XPath，像这样：

  data.evaluate（计数（// DIV [@类='findme']），data.documentElement，空，XPathResult.NUMBER_TYPE，NULL）.numberValue
 

在你的code：

  $。员额（'/回声/ XML /'，
    {XML：'＆LT; D​​IV ID =包装＆GT;＆LT; D​​IV CLASS =findmeID =findme1＆GT; findme 1＆LT; / DIV＆GT;＆LT; D​​IV CLASS =findme＆GT; findme 2'; / DIV＆GT ;＆LT; / DIV＆GT;}，
    功能（数据，textStatus，jqXHR）{
        数据= jqXHR.responseXML;
        VAR味精='发现'+ data.getElementsByTagName（'格'）的长度+。在Ajax响应的div，＆LT; BR /＆GT; +
                  '发现​​'+ data.evaluate（计数（// DIV [@类='findme']），data.documentElement，空，XPathResult.NUMBER_TYPE，NULL）.numberValue +'findme元素通过类名＆LT; BR /＆GT; 

        $（'＃阿贾克斯）HTML（MSG）;
    }
）;
 

但它可能只是更容易从XML或使用，赞转换。由于您使用jQuery的其他地方，你可能只是做 $（jqXHR.responseXML.documentElement）.find（'。findme'）。长度。

Am I missing something with getElementsByClassName() and querySelectorAll()?

In Firefox 9 and Chrome 17 and probably all browsers, it seems that both of these functions return an empty array when executed on an AJAX response. See the following link for an example.

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

I can call document.getElementsByClassName('findme') or anyElement.getElementsByClassName('findme') for any element within the DOM of the current page, but for some reason it doesn't seem to work on the XML Document returned for an AJAX request. Note that getElementsByTagName works for AJAX and in Firebug you can see that the elements have the "findme" class.

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>

解决方案

Since you're working with an xml document, the standard DOM methods dealing with attributes don't apply. One option is to use XPath, like so:

data.evaluate("count(//div[@class='findme'])", data.documentElement, null, XPathResult.NUMBER_TYPE, null).numberValue

In your code:

$.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);
    }
);

But it may just be easier to convert from XML or use Sizzle. Since you're using jQuery elsewhere, you could just do $(jqXHR.responseXML.documentElement).find('.findme').length.

这篇关于getElementsByClassName方法和AJAX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！