Convertir un nœud DOM ou Document en XML en JavaScript

Question

Dites-vous en JavaScript sont remis un seul élément DOM ou Document (par exemple window.document), comment transformeriez-vous en XML valide?

Plus spécifiquement pour mon exemple, j'ai une page Web qui affiche un SVG, ce SVG a beaucoup de JavaScript pour permettre l'interaction. C'est un affichage graphique qui vous permet de zoomer dans le graphique et même faire quelques transformations. Maintenant, les utilisateurs de cette envie d'avoir un bouton "Enregistrer l'image". La façon dont j'imagine faire cela est de prendre le nœud de document pour l'élément SVG, et le convertir en XML, puis l'envoyer au serveur, qui renvoie ensuite une page avec le document SVG, ou une image PNG.

Tout cela fonctionne sur FireFox (qui est actuellement une exigence pour les utilisateurs, bien qu'il fonctionne bien dans Safari et Chrome). Dans Firefox sur la page Web, j'ai inclus le document SVG en tant qu'élément Object. En javascript, je peux accéder à ces objets contentDocument, qui fait référence à la racine de la page XML. Il contient une version XML, une balise Document et la balise svg racine avec tous les attributs.

Peut-être que quelqu'un a déjà résolu cela, donc je peux copier leur code. Peut-être que quelqu'un sait où chercher dans firebug pour y parvenir. Ou peut-être existe-t-il déjà des méthodes DOM pour cela.

Answer 1

Il existe un objet API non standard: XMLSerializer (il n'est pas standard mais est implémenté dans tous les navigateurs sauf IE).

Sa méthode serializeToString s'attend à ce que l'objet DOMNode soit transmis.

var sXML = new XMLSerializer().serializeToString(document.body); 

Dans Internet Explorer il n'y a pas moyen de récupérer XML approprié pour HTML, à moins d'obtenir .outerHTML et fixer tous les problèmes qui viennent avec sérialisation au format HTML (comme manquant des citations dans les attributs, et non des tags fermés etc.)

Answer 2

Je devrai regarder dans XMLSerializer demain. Voici le code que je fini par écrire à la place, au cas où quelqu'un est intéressé (nécessite prototype et Firebug pour les nœuds inconnus):

function extractXML(node) { 
    switch (node.nodeType) { 
     case 1: return extractNodeXML(node); 
     case 2: return extractAttributeXML(node); 
     // 3 = Text node 
     case 3: return node.nodeValue; 
     // 8 = Comment node - ignore 
     case 8: return ""; 
     case 9: return extractDocumentNodeXML(node); 
     case 10: return extractDocumentTypeXML(node); 
     default: console.log(node); return "Unkwon type: "+node.nodeType; 
    } 
} 
function extractNodeXML(node) { 
    var xml = "<"+node.nodeName; 
    $A(node.attributes).each(function (node) {xml += " "+extractXML(node)}); 
    xml +=">" 
    $A(node.childNodes).each(function (node) {xml += extractXML(node)}); 
    xml += "</"+node.nodeName+">" 
    return xml; 
} 
function extractAttributeXML(node) { 
    return node.nodeName+"=\""+node.nodeValue+"\"" 
} 
function extractDocumentNodeXML(node) { 
    var xml = "<?xml version=\""+node.xmlVersion+"\" encoding=\""+node.xmlEncoding+"\"?>" 
    $A(node.childNodes).each(function (node) {xml += extractXML(node)}); 
    return xml; 
} 
function extractDocumentTypeXML(node) { 
    return "<!DOCTYPE "+node.name+" PUBLIC \""+node.publicId+"\" \""+node.systemId+"\">" 
}