Конвертировать DOM-узел или документ в XML в JavaScript

Question

Скажем, в JavaScript вам вручают один элемент DOM или Document (например, window.document), как бы вы превратили это в действительный XML?

Более конкретно, для моего примера, у меня есть веб-страница, которая отображает SVG, этот SVG имеет много JavaScript для взаимодействия. Это графическое отображение, которое позволяет вам увеличивать график и даже делать некоторые преобразования. Теперь пользователи, которые хотят отключить эту функцию, имеют кнопку «Сохранить изображение». Я представляю себе способ сделать это - взять узел документа для элемента SVG и преобразовать его в XML, а затем отправить его на сервер, который затем возвращает страницу с документом SVG или изображение PNG.

Это все работает на FireFox (что в настоящее время является обязательным требованием для пользователей, хотя также отлично работает в Safari и Chrome). В Firefox на веб-странице я включил документ SVG как элемент Object. В javascript я могу получить доступ к этим объектам contentDocument, который ссылается на корень вне страницы XML. Он содержит версию XML, тег Document и корневой тег svg со всеми атрибутами.

Может быть, кто-то уже решил это, поэтому я могу скопировать их код. Возможно, кто-то знает, где искать firebug для достижения этой цели. Или, может быть, для этого уже есть методы DOM.

Answer 1

Существует нестандартный объект API: XMLSerializer (он не является стандартным, хотя реализован во всех браузерах, кроме IE).

Его метод serializeToString ожидает передачи объекта DOMNode.

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

В Internet Explorer нет способа получить правильный XML для HTML, если только не получить .outerHTML и устранить все проблемы, связанные с сериализацией в HTML (например, пропущенные кавычки в атрибутах, не закрытые теги и т. Д.)

Answer 2

Мне придется заглянуть в XMLSerializer завтра. Вот код, который я в итоге написал вместо этого, на случай, если кому-то интересно (требуется прототип и FireBug для неизвестных узлов):

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