JavaScript DOMParser 访问innerHTML 等属性

IT技术 javascript dom domparser
2021-01-30 02:26:58

我正在使用以下代码将字符串解析为 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');

是否有一个神奇的功能可以访问这些属性?

3个回答

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

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 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\/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));
哇,非常有用的答案!我自己找不到那个。只是 mime 类型并启用该 mime 类型:)
2021-03-26 02:26:58
谢谢@RobW。这对于可以使用正则表达式编辑文本字符串以添加 html 然后构建替换节点避免 innerHTML的反向过程很有用 您的解决方案工作得很好!
2021-03-28 02:26:58
@RobW 我假设你的意思是XMLDocument.
2021-03-28 02:26:58
附注。为了澄清起见,当您使用text/xml,docXMDocument. 使用text/html,它是 的一个实例HTMLDocument
2021-03-30 02:26:58
解决方案还不错,但是: - 为什么要使用昏迷运算符而不是 3 个指令?这个选项更加“晦涩”并且不会增加任何优势。此外, first_elt 使用在窗口范围内创建一个全局变量(太糟糕了)。
2021-04-12 02:26:58

尝试这样的事情:

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

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

是的,如果您还想执行脚本,这是最好的解决方案,例如:stackoverflow.com/a/58862506/890357
2021-04-02 02:26:58

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