JavaScript DOM解析器访问innerHTML和其他属性

Question

JavaScript DOM解析器访问innerHTML和其他属性

33

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

是否有一种神奇的函数可以访问这些属性？

- DADU

3个回答

3

尝试像这样：

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

HTML是您要转换的字符串。

- dude

是的，如果您还想执行脚本，那么这是最好的解决方案，例如： https://dev59.com/7H7aa4cB1Zd3GeqPrIJf#58862506 - marciowb

0

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

- swannty

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rob W · Accepted Answer

你当前的方法失败了，因为给定的XML文档未定义HTML属性。如果你提供text/html MIME类型，这个方法应该可以工作。

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开发者网络：

/* 
 * 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));