Ottieni la rappresentazione di stringa di un nodo DOM

Javascript: ho la rappresentazione DOM di un nodo (elemento o documento) e sto cercando la sua rappresentazione in stringa. Per esempio,

var el = document.createElement("p"); el.appendChild(document.createTextNode("Test"));

dovrebbe produrre:

 get_string(el) == "Test
";

Ho la sensazione forte, che mi manca qualcosa di banalmente semplice, ma semplicemente non trovo un metodo che funzioni in IE, FF, Safari e Opera. Pertanto, outerHTML non è un’opzione.

È ansible creare un nodo genitore temporaneo e ottenere il contenuto HTML interno di esso:

 var el = document.createElement("p"); el.appendChild(document.createTextNode("Test")); var tmp = document.createElement("div"); tmp.appendChild(el); console.log(tmp.innerHTML); // Test

EDIT: Si prega di consultare la risposta di seguito su outerHTML. el.outerHTML dovrebbe essere tutto ciò che è necessario.

Quello che stai cercando è ‘outerHTML’, ma ho bisogno di un fallback coz non compatibile con i vecchi browser.

 var getString = (function() { var DIV = document.createElement("div"); if ('outerHTML' in DIV) return function(node) { return node.outerHTML; }; return function(node) { var div = DIV.cloneNode(); div.appendChild(node.cloneNode(true)); return div.innerHTML; }; })(); // getString(el) == "Test
"

Qui troverai il mio plugin jQuery: ottieni l’HTML esterno dell’elemento selezionato

Sotto FF è ansible utilizzare l’object XMLSerializer per serializzare XML in una stringa. IE ti dà una proprietà xml di un nodo. Quindi puoi fare quanto segue:

 function xml2string(node) { if (typeof(XMLSerializer) !== 'undefined') { var serializer = new XMLSerializer(); return serializer.serializeToString(node); } else if (node.xml) { return node.xml; } }

Non penso che tu abbia bisogno di uno script complicato per questo. Basta usare

 get_string=(el)=>el.outerHTML;

Usa l’elemento # outerHTML:

 var el = document.createElement("p"); el.appendChild(document.createTextNode("Test")); console.log(el.outerHTML);

Può anche essere usato per scrivere elementi DOM. Dalla documentazione di Mozilla:

L’attributo outerHTML dell’interfaccia DOM dell’elemento ottiene il frammento HTML serializzato che descrive l’elemento inclusi i suoi discendenti. Può essere impostato per sostituire l’elemento con i nodes analizzati dalla stringa specificata.

https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML

Utilizza element.outerHTML per ottenere la rappresentazione completa dell’elemento, inclusi tag e attributi esterni.

Se il tuo elemento ha un genitore

 element.parentElement.innerHTML

Ho sprecato un sacco di tempo a capire cosa c’è che non va quando eseguo un’iterazione di DOMElements con il codice nella risposta accettata. Questo è ciò che ha funzionato per me, altrimenti ogni secondo elemento scompare dal documento:

 _getGpxString: function(node) { clone = node.cloneNode(true); var tmp = document.createElement("div"); tmp.appendChild(clone); return tmp.innerHTML; },

se si usa reactjs:

 const html = ReactDOM.findDOMNode(document.getElementsByTagName('html')[0]).outerHTML;