2012-02-12 19 views
16

Sto usando il seguente codice per analizzare una stringa in DOM:accesso JavaScript DOMParser innerHTML e altre proprietà

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

Dove string è proprio qualcosa di simile <!DOCTYPE html><html><head></head><body>content</body></html>.

typeof doc mi dà object. Se faccio qualcosa come doc.querySelector('body') ho un oggetto DOM indietro. Ma se provo ad accedere a qualsiasi proprietà, come si fa normalmente possibile, mi dà undefined:

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

Lo stesso vale per le altre proprietà, ad esempio, id. Il recupero degli attributi d'altra parte va bene doc.querySelector('body').getAttribute('id');.

Esiste una funzione magica per accedere a tali proprietà?

risposta

32

Il metodo corrente non riesce, perché le proprietà HTML non sono definite per il documento XML specificato. Se si fornisce il tipo MIME text/html, il metodo dovrebbe funzionare.

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" 

Il codice di seguito consente il tipo MIME text/html per i browser che non supportano nativamente ancora. Viene recuperato dalla 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)); 
+3

PS. Per chiarimenti, quando stai usando 'text/xml',' doc' è un'istanza di 'XMDocument'. Usando 'text/html', è un'istanza di' HTMLDocument'. –

+0

Waaw, una risposta abbastanza utile! Non avrei potuto trovarlo io stesso. Solo il tipo mime e abilitando quel tipo di mime :) – DADU

+1

@RobW Immagino tu intenda "XMLDocument". – devios1

0

Usa element.getAttribute(attributeName) per XML/elementi HTML

Problemi correlati