2011-09-27 7 views
5

Vorrei serializzare parte del DOM in XHTML (XML valido). Supponiamo che ho solo un elemento all'interno <body>, e che questo è l'elemento che voglio serializzare:In JavaScript, come può la parte serializzatore del DOM in XHTML?

<div> 
    <hr> 
    <img src="/foo.png"> 
</div> 

Con questo, document.innerHTML mi dà quasi quello che voglio, eccetto che restituisce HTML, non XHTML (cioè la <hr> e <img> non saranno chiusi correttamente). Dal innerHTML non fa il trucco, come posso serializzare parte del DOM in XHTML?

+1

Quale compatibilità browser desideri? [Funziona in Firefox e Chrome per me] (https://developer.mozilla.org/en/XMLSerializer). Però non so di IE. Ho trovato qualcosa che usano un wrapper come 'if (! Window.XMLSerializer) {window.XMLSerializer = function() {}; window.XMLSerializer.prototype.serializeToString = function (XMLObject) {return XMLObject.xml || ''; };} ', anche se non so per quale browser è (Mac -> no IE per testare). –

+0

** Demo live: ** http://jsfiddle.net/qUwXE/ (ma non funziona in Chrome e Safari) –

+0

@ ŠimeVidas: Grazie ... in realtà l'ho usato su un documento XML analizzato, dove ha funzionato anche in Chrome. Peccato che non funzioni con l'HTML. –

risposta

3

Non sono sicuro se si utilizza un'altra lingua (sulla parte superiore del motore JavaScript) è un opzione. Se questo è di alcun aiuto, questo sarebbe il XQuery (XQIB) modo di farlo:

<script type="application/xquery"> 
    serialize(b:dom()//div) 
</script> 

Ad esempio, nella pagina seguente, l'XHTML serializzato viene scritto come testo sulla pagina invece del tag script , dopo il tag div:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title>Serializing part of the DOM</title> 
    <meta charset="UTF-8"/> 
    <script type="text/javascript" src="mxqueryjs/mxqueryjs.nocache.js"></script> 
    </head> 
    <body> 
    <div> 
     <hr> 
     <img src="/foo.png"> 
    </div> 
    <script type="application/xquery"> 
     serialize(b:dom()//div) 
    </script> 
    </body> 
</html> 

il DOM HTML è mappato al modello di dati XQuery (un modello di dati in cima XML). b: dom() restituisce il nodo del documento della pagina e // div si sposta su tutti i tag div discendenti. La funzione serializza quindi la serializza su una stringa.

Tuttavia, questo funzionerà per IE9 + (non 6+) e versioni recenti di Chrome, Firefox, Safari, Opera.

0

questo non è testato codice, ma vorrei eseguire la scansione in modo ricorsivo figli dell'elemento genitore e costruire XHTML come questo:

var parent; 
var parse = function(el) { 
    var res = ""; 
    for(var i=0; i < el.childNodes.length; i++) { 
    var child = el.childNodes[i]; 
    res += "<"+child.tagName; 
    // scan through attributes 
    for(var k=0; k < child.attributes.length; k++) { 
     var attr = child.attributes[k]; 
     res += " "+attr.name+"='"+attr.value+"'"; 
    } 
    res += ">"; 
    res += parse(child); 
    res += "</"+child.tagName+">"; 
    } 
    return res; 
} 
var xhtml = parse(parent); 
+3

Forse la serializzazione manuale è l'unico modo compatibile con il cross-browser, ma è un po 'più complicato. Il tuo codice così com'è non funziona. Ci dovrebbe essere una biblioteca per questo da qualche parte. –

0

Sarissa, la libreria di compatibilità cross-browser Javascript deve un'implementazione XMLSerializer per i browser che non dispongono di uno:

http://dev.abiss.gr/sarissa/jsdoc/symbols/XMLSerializer.htm

They also have an example of how to use it, che è solo:

var xmlString = new XMLSerializer().serializeToString(someXmlDomNode); 

Secondo loro, il il supporto del browser per la loro libreria è buono:

I browser supportati sono Mozilla - Firefox e famiglia, Internet Explorer con MSXML3.0 e versioni successive, Konqueror (con KDE 3.3+ di sicuro), Safari e Opera.