Конвертировать DOM-узел или документ в XML в JavaScript
-
06-07-2019 - |
Вопрос
Скажем, в 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.
Решение
Существует нестандартный объект API: XMLSerializer (это не стандартный реализовано во всех браузерах, кроме IE).
Его метод serializeToString ожидает передачи объекта DOMNode.
var sXML = new XMLSerializer().serializeToString(document.body);
В Internet Explorer нет способа извлечь правильный XML для HTML, кроме случаев получения .outerHTML и устранения всех проблем, связанных с сериализацией в HTML (таких как отсутствующие кавычки в атрибутах, не закрытые теги и т. д.)
Другие советы
Завтра мне придется заглянуть в 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+"\">"
}