Konvertieren eines DOM-Knotens oder -Dokuments in JavaScript in JavaScript

Question

Angenommen, Sie erhalten in JavaScript ein einzelnes DOM-Element oder Dokument (z. B. window.document), wie würden Sie das in gültiges XML umwandeln?

Genauer gesagt für mein Beispiel, ich habe eine Webseite, die ein SVG anzeigt, dieses SVG hat viel JavaScript, um Interaktion zu ermöglichen. Es ist eine Grafikanzeige, mit der Sie das Diagramm vergrößern und sogar einige Transformationen vornehmen können. Jetzt möchten die Benutzer eine Schaltfläche "Bild speichern" haben. So stelle ich mir vor, den Dokumentknoten für das SVG-Element in XML zu konvertieren und dann an den Server zu senden, der dann eine Seite mit dem SVG-Dokument oder ein PNG-Bild zurückgibt.

Dies läuft alles auf FireFox (das ist derzeit eine Voraussetzung für die Benutzer, obwohl es auch in Safari und Chrome gut funktioniert). In Firefox auf der Webseite habe ich das SVG-Dokument als Objektelement eingefügt. In Javascript kann ich auf die Objekte contentDocument zugreifen, die sich auf das root der XML-Seite beziehen. Es enthält die XML-Version, ein Document-Tag und das Root-Svg-Tag mit allen Attributen.

Vielleicht hat jemand das schon gelöst, also kann ich seinen Code kopieren. Vielleicht weiß jemand, wo er im Feuerwanzen suchen muss, um dies zu erreichen. Oder vielleicht gibt es dafür bereits DOM-Methoden.

Answer 1

Es gibt ein nicht standardmäßiges API-Objekt: XMLSerializer (es ist kein Standard, obwohl es in allen IE-Browsern implementiert ist).

Die serializeToString-Methode erwartet, dass das DOMNode-Objekt übergeben wird.

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

In Internet Explorer gibt es keine Möglichkeit, die richtige XML für HTML abzurufen, es sei denn, .outerHTML bekommen und alle Probleme zu beheben, die mit der Serialisierung zu HTML (nicht geschlossene Tags usw. in Attribute wie fehlende Anführungszeichen) kommen

Answer 2

Ich werde morgen in XMLSerializer suchen müssen. Hier ist der Code, den ich stattdessen am Ende zu schreiben, falls jemand interessiert ist (erfordert Prototyp und Firebug für unbekannten Knoten):

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+"\">" 
}