Konvertieren eines DOM-Knoten oder Dokument XML in JavaScript

Question

Angenommen, Sie in JavaScript sind ein einziges DOM-Element oder Dokument (zum Beispiel window.document) übergeben, wie würden Sie drehen, die in gültige XML?

Insbesondere für mein Beispiel habe ich eine Webseite, die ein SVG angezeigt ist, diese SVG viele JavaScript Interaktion zu ermöglichen hat. Es ist eine grafische Darstellung, Anzeige, dass sie Sie in der Grafik vergrößern und sogar einige Transformationen machen. Nun können die Nutzer aus diesem Mangel ist ein „Bild speichern“ -Schaltfläche haben. Die Art, wie ich dies tun imagine ist das Dokument-Knoten für das SVG-Element zu nehmen und es in XML zu konvertieren, dann ist das, an den Server senden, die dann eine Seite mit dem SVG-Dokument zurückgibt, oder ein PNG-Bild.

Das ist alles läuft auf FireFox (das ist derzeit eine Voraussetzung für die Benutzer, obwohl es in Safari und Chrome auch gut funktioniert). In Firefox in der Web-Seite, ich habe das SVG-Dokument als Objekt Element enthält. In Javascript kann ich, dass Objekte zugreifen contentdocument, dass bezieht sich auf die Wurzel aus der XML-Seite. Es enthält XML-Version, ein Dokument-Tag, und die Wurzel svg-Tag mit allen Attributen.

Vielleicht hat jemand bereits gelöst dies, so kann ich ihren Code kopieren. Vielleicht hat jemand weiß, wo in Firebug zu suchen, dies zu erreichen. Oder vielleicht gibt es bereits DOM-Methoden für diese.

Answer 1

Es ist ein Nicht-Standard-API-Objekt: XMLSerializer (es ist nicht Standard ist allerdings wird in allen, aber IE-Browsern implementiert).

Die serializeToString Methode erwartet DOMNode Objekt übergeben werden.

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 zur Festsetzung alle Probleme, die mit der Serialisierung zu HTML kommen (wie zitiert in Attribute fehlen, nicht geschlossene Tags usw.)

Answer 2

werde ich morgen in XMLSerializer suchen. 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+"\">"
}