new XMLSerializer() — Methode · JavaScript-Referenz

Signatur

new XMLSerializer()

Beschreibung

Mit new XMLSerializer() legst du eine Instanz an, deren einzige Methode serializeToString(node) einen DOM-Knoten samt allen Nachfahren in einen XML- bzw. XHTML-String umwandelt. Das ist das Gegenstück zu DOMParser: Der eine macht aus Text ein DOM, der andere macht aus dem DOM wieder Text.

Typische Anwendungsfälle sind das Exportieren von inline eingebundenen SVG-Grafiken (z. B. als Download oder als Data-URL für ein <img>), das Speichern oder Versenden von XML-Dokumenten, die per DOMParser oder document.implementation.createDocument() erzeugt und verändert wurden, sowie das Debuggen von DOM-Strukturen.

Der Konstruktor erwartet keine Argumente und hat keinen Zustand. Du kannst also eine Instanz anlegen und beliebig oft wiederverwenden. Anders als element.outerHTML erzeugt der Serializer wohlgeformtes XML: Namensräume (xmlns) werden ergänzt, leere Elemente werden selbstschließend ausgegeben, und Sonderzeichen werden XML-konform maskiert.

Rückgabewert

Typ

XMLSerializer

Beschreibung

Ein neues XMLSerializer-Objekt mit der Methode serializeToString().

Beispiele

Instanz erzeugen und XML-Dokument serialisieren

const parser = new DOMParser();
const doc = parser.parseFromString('<config><item key="theme">dark</item></config>', 'application/xml');

// Dokument verändern
const neu = doc.createElement('item');
neu.setAttribute('key', 'lang');
neu.textContent = 'de';
doc.documentElement.appendChild(neu);

const serializer = new XMLSerializer();
console.log(serializer.serializeToString(doc));

Inline-SVG als Datei herunterladen

const svg = document.querySelector('svg#diagramm');
const xml = new XMLSerializer().serializeToString(svg);

const blob = new Blob([xml], { type: 'image/svg+xml' });
const url = URL.createObjectURL(blob);

const link = document.createElement('a');
link.href = url;
link.download = 'diagramm.svg';
link.click();
URL.revokeObjectURL(url);

SVG in ein <img> bzw. Canvas übernehmen

const svg = document.querySelector('svg');
const xml = new XMLSerializer().serializeToString(svg);
const img = new Image();
img.onload = () => {
  const canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  canvas.getContext('2d').drawImage(img, 0, 0);
  console.log(canvas.toDataURL('image/png').slice(0, 22));
};
img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(xml);

data:image/png;base64,

Unterschied zu outerHTML bei HTML-Elementen

const div = document.createElement('div');
div.innerHTML = '<br><span>A &amp; B</span>';

console.log(div.outerHTML);
console.log(new XMLSerializer().serializeToString(div));

// Wichtig · Fallstricke

Der Konstruktor muss mit new aufgerufen werden. Ein Aufruf ohne new wirft einen TypeError.
Bei HTML-Elementen fügt der Serializer xmlns="http://www.w3.org/1999/xhtml" hinzu. Wenn du reines HTML brauchst, nimm outerHTML.
Eine XML-Deklaration (<?xml version="1.0"?>) wird nicht automatisch vorangestellt. Bei Bedarf musst du sie selbst ergänzen.
Beim SVG-Export werden externe CSS-Regeln nicht mit übernommen. Nur Inline-Stile und Attribute landen im String.
Einen Formatierungs- oder Einrückungsmodus gibt es nicht, die Ausgabe ist kompakt.
In Node.js gibt es XMLSerializer nicht nativ. Dort helfen Bibliotheken wie jsdom oder @xmldom/xmldom.
Sicherheit: Wenn du serialisierte Inhalte aus unsicheren Quellen später wieder per innerHTML einfügst, besteht XSS-Gefahr. Bereinige sie vorher, z. B. mit DOMPurify.

Siehe auch

XMLSerializer XMLSerializer.prototype.serializeToString() DOMParser DOMParser.prototype.parseFromString() Element.outerHTML new CloseWatcher() new DocumentTimeline()