使用 javascript 从 Ajax html 字符串中选择元素答案

【问题标题】：Select element from Ajax html string with javascript使用 javascript 从 Ajax html 字符串中选择元素
【发布时间】：2014-04-04 11:42:27
【问题描述】：

我正在构建一个新项目，并试图避免使用 jQuery。我正在使用Chibi micro-framework，这看起来很有希望。

var container = $('#container');

$().ajax(some_address,'GET',function(data,status){

    container.html(data,'append');

});

来自 Ajax 返回的数据是一个 HTML 字符串。我想从字符串中选择某些 div（字符串返回整个 html 页面）。

在 jQuery 中我会做类似的事情：

$('.select_this', data);

我怎样才能做到这一点？我相信这可以（仅？）只用 javascript 来完成。

【问题讨论】：

标签： javascript ajax string dom

【解决方案1】：

你可以使用DOMParser:

var parser = new DOMParser();
var doc = parser.parseFromString(data, 'text/html');

var elements = doc.getElementsByClassName('select_this');

for (var i = 0, len = elements.length; i < len; i++) {
    alert(elements[i].innerHTML);
}

有关工作示例，请参阅 http://jsfiddle.net/t6w57/4/。

编辑：对于较旧的浏览器，您将需要一个 polyfill（此代码改编自 the DOMParser documentation by the Mozilla Developer Network）：

(function(a){var b=a.prototype,d=b.parseFromString;try{return(new a).parseFromString("","text/html")}catch(e){}b.parseFromString=function(a,b){var c;return/^\s*text\/html\s*(?:;|$)/i.test(b)?(c=document.implementation.createHTMLDocument(""),(/<!DOCTYPE/i.test(a)?c.documentElement:c.body).innerHTML=a,c):d.apply(this,arguments)}})(DOMParser);

非缩小代码：

/*
 * DOMParser HTML extension
 * 2012-09-04
 * 
 * By Eli Grey, http://eligrey.com
 * Public domain.
 * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
 */

/*! @source https://gist.github.com/1129031 */
/*global document, DOMParser*/

(function(DOMParser) {
    "use strict";

    var
      DOMParser_proto = DOMParser.prototype
    , real_parseFromString = DOMParser_proto.parseFromString
    ;

    // Firefox/Opera/IE throw errors on unsupported types
    try {
        // WebKit returns null on unsupported types
        if ((new DOMParser).parseFromString("", "text/html")) {
            // text/html parsing is natively supported
            return;
        }
    } catch (ex) {}

    DOMParser_proto.parseFromString = function(markup, type) {
        if (/^\s*text\/html\s*(?:;|$)/i.test(type)) {
            var
              doc = document.implementation.createHTMLDocument("")
            ;
                if (markup.toLowerCase().indexOf('<!doctype') > -1) {
                    doc.documentElement.innerHTML = markup;
                }
                else {
                    doc.body.innerHTML = markup;
                }
            return doc;
        } else {
            return real_parseFromString.apply(this, arguments);
        }
    };
}(DOMParser));

【讨论】：

感谢您的回答，但我得到无法调用 null 的方法 'getElementsByClassName'
@Alvaro 你用的是什么浏览器？您使用的 HTML 字符串是什么？
铬。我正在尝试创建一个 jsfiddle。 HMTL字符串是ajax调用到某个页面的返回数据，你是说这个吗？
jsfiddle 给了我同样的错误（使用 Chrome）
小提琴在 Firefox 和 IE 中适用于我，但不适用于 Chrome（我尝试使用无插件以防万一）