2011-09-27 5 views
5

Me gustaría serializar parte del DOM a XHTML (XML válido). Supongamos que tengo sólo un elemento dentro <body>, y que este es el elemento que quiero serializar:En JavaScript, ¿cómo puede el serializador parte del DOM a XHTML?

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

Con esto, document.innerHTML me da casi lo que quiero, excepto que devuelve código HTML, no XHTML (es decir, el <hr> y <img> no se cerrarán correctamente). Dado que innerHTML no funciona, ¿cómo puedo serializar parte del DOM en XHTML?

+1

¿Qué compatibilidad de navegador está usted después? [Esto funciona en Firefox y Chrome para mí] (https://developer.mozilla.org/en/XMLSerializer). Aunque no sé sobre IE. Encontré algo si usaban un contenedor como 'if (! Window.XMLSerializer) {window.XMLSerializer = function() {}; window.XMLSerializer.prototype.serializeToString = function (XMLObject) {return XMLObject.xml || ''; };} ', aunque no sé para qué navegador es (Mac -> no IE para probar). –

+0

** Demostración en vivo: ** http://jsfiddle.net/qUwXE/ (pero no funciona en Chrome y Safari) –

+0

@ ŠimeVidas: Gracias ... en realidad lo usé en un documento XML analizado, donde también funcionó en Chrome. Lástima que no funciona con el HTML. –

Respuesta

3

No estoy seguro de si se utiliza otro idioma (en la parte superior del motor de JavaScript) se una opción. Si esto es de alguna ayuda, este sería el XQuery (XQIB) forma de hacerlo:

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

Por ejemplo, en la página siguiente, el XHTML serializado se escribe como texto en la página en lugar de la etiqueta script , después de la etiqueta 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> 

el DOM HTML se asigna al modelo de datos XQuery (un modelo de datos en la parte superior de XML). b: dom() devuelve el nodo del documento de la página y // div navega a todas las etiquetas div descendientes. La función de serialización serializa esto en una cadena.

Sin embargo, esto funcionará para IE9 + (no 6+) y las versiones recientes de Chrome, Firefox, Safari, Opera.

0

esto no se prueba el código, pero me gustaría escanear de forma recursiva hijos del elemento padre y construir XHTML como esto:

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

Quizás la serialización manual sea la única forma compatible con varios navegadores, pero es un poco más complicada. Tu código tal como está no funciona. Debería haber una biblioteca para esto en alguna parte. –

0

Sarissa, la biblioteca de compatibilidad Javascript multi-navegador tiene una implementación XMLSerializer para los navegadores que carecen de uno:

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

They also have an example of how to use it, que es justo:

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

Según ellos, el el soporte del navegador para su biblioteca es bueno:

Los navegadores compatibles son Mozilla - Firefox y familia, Internet Explorer con MSXML3.0 y superior, Konqueror (KDE 3.3+ para seguridad), Safari y Opera.

Cuestiones relacionadas