JavaScript DOMParser access innerHTML 和其他属性

JavaScript DOMParser access innerHTML and other properties

本文关键字：其他 属性 innerHTML DOMParser access JavaScript      更新时间：2023-09-26

我使用以下代码将字符串解析为 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：

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

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

是否有可以访问这些属性的魔术功能？

当前方法失败，因为未为给定的 XML 文档定义 HTML 属性。如果提供 MIME 类型的text/html，则该方法应该有效。

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"

下面的代码为本机还不支持 MIME 类型的浏览器启用 MIME 类型的text/html。从 Mozilla 开发者网络检索：

/* 
 * 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'/html's*(?:;|$)/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));

尝试这样的事情：

const fragment = document.createRange().createContextualFragment(html);

而 html 是您要转换的字符串。

对 XML/HTML 元素使用 element.getAttribute(attributeName)

相关文章：