JavaScript DOMParser доступ к innerHTML и другим свойствам - PullRequest
Новая
       14

JavaScript DOMParser доступ к innerHTML и другим свойствам

18 голосов
/ 12 февраля 2012

Я использую следующий код для разбора строки в 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 ]

37 голосов
/ 12 февраля 2012

Ваш текущий метод не работает, потому что свойства HTML не определены для данного документа XML. Если вы указали тип 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"

Приведенный ниже код активирует 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));
0 голосов
/ 17 июля 2019

Попробуйте что-то вроде этого: 

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

, тогда как html - это строка, которую вы хотите преобразовать.

0 голосов
/ 05 марта 2017

Использовать element.getAttribute(attributeName) для элементов XML / HTML

...