JavaScript DOMParser 访问innerHTML 等属性

本文介绍了JavaScript DOMParser 访问innerHTML 等属性的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用以下代码将字符串解析为 DOM:

I am using the following code to parse a string into DOM:

var doc = new DOMParser().parseFromString(string, 'text/xml');

其中 string 类似于 <!DOCTYPE html><html><head></head><body>content</body></html>.

typeof doc 给了我 object.如果我执行类似 doc.querySelector('body') 的操作，我会返回一个 DOM 对象.但是，如果我尝试访问任何属性，就像通常一样，它会给我 undefined:

typeof doc gives me object. If I do something like doc.querySelector('body') I get a DOM object back. But if I try to access any properties, like you normally can, it gives me undefined:

doc.querySelector('body').innerHTML; // undefined

其他属性也是如此，例如id.另一方面，属性检索运行良好 doc.querySelector('body').getAttribute('id');.

The same goes for other properties, e.g. id. The attribute retrieval on the other hand goes fine doc.querySelector('body').getAttribute('id');.

有什么神奇的功能可以访问这些属性吗?

Is there a magic function to have access to those properties?

推荐答案

您当前的方法失败，因为没有为给定的 XML 文档定义 HTML 属性.如果您提供 text/html MIME 类型，该方法应该可以工作.

Your current method fails, because HTML properties are not defined for the given XML document. If you supply the text/html MIME-type, the method should work.

var string = '<!DOCTYPE html><html><head></head><body>content</body></html>';
var doc = new DOMParser().parseFromString(string, 'text/html');
doc.body.innerHTML; // or doc.querySelector('body').innerHTML
// ^ Returns "content"

下面的代码为尚不原生支持的浏览器启用 text/html MIME 类型.检索自 Mozilla 开发者网络:

The code below enables the text/html MIME-type for browsers which do not natively support it yet. Is retrieved from the Mozilla Developer Network:

/*
 * DOMParser HTML extension
 * 2012-02-02
 *
 * 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/htmls*(?:;|$)/i.test(type)) {
            var doc = document.implementation.createHTMLDocument("")
              , doc_elt = doc.documentElement
              , first_elt;

            doc_elt.innerHTML = markup;
            first_elt = doc_elt.firstElementChild;

            if (doc_elt.childElementCount === 1
                && first_elt.localName.toLowerCase() === "html") {
                doc.replaceChild(first_elt, doc_elt);
            }

            return doc;
        } else {
            return real_parseFromString.apply(this, arguments);
        }
    };
}(DOMParser));

这篇关于JavaScript DOMParser 访问innerHTML 等属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！