XMLSerializer — Schnittstelle · JavaScript-Referenz

Signatur

interface XMLSerializer

Beschreibung

XMLSerializer ist das Gegenstück zu DOMParser: Während DOMParser aus einem String einen DOM-Baum erzeugt, wandelt XMLSerializer einen Node (z. B. ein Document, ein Element oder ein DocumentFragment) samt allen Nachfahren wieder in einen Text um. Die einzige Methode ist serializeToString(root).

Typische Einsatzfälle sind das Exportieren dynamisch erzeugter SVG-Grafiken (etwa als Download oder Data-URL), das Versenden von XML-Dokumenten an einen Server, das Speichern von Konfigurationen im XML-Format und das Debuggen von DOM-Strukturen, die mit document.implementation.createDocument() erstellt wurden.

Im Unterschied zu element.outerHTML serialisiert XMLSerializer nach XML-Regeln: Leere Elemente werden als   geschrieben, Namensräume werden als xmlns-Attribute ergänzt und Sonderzeichen werden XML-konform maskiert. Bei HTML-Elementen aus einem HTML-Dokument entsteht dadurch XHTML-artiger Text mit xmlns="http://www.w3.org/1999/xhtml".

Parameter

Name	Typ	Default	Beschreibung
$root Pflicht	Node		Parameter von `serializeToString()`: der Knoten, der samt Unterbaum serialisiert wird – z. B. `Document`, `Element`, `DocumentFragment`, `Text` oder `Comment`.

Rückgabewert

Typ

string

Beschreibung

serializeToString() liefert den XML-Text des übergebenen Knotens und aller Nachfahren. Der Konstruktor new XMLSerializer() liefert eine XMLSerializer-Instanz.

Beispiele

Instanz erzeugen und ein XML-Dokument serialisieren

const parser = new DOMParser();
const doc = parser.parseFromString('<config><user name="anna"/></config>', 'application/xml');

// Wert im DOM ändern
doc.querySelector('user').setAttribute('role', 'admin');

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

Inline-SVG als Datei herunterladen

const svg = document.querySelector('svg#chart');
const source = new XMLSerializer().serializeToString(svg);

// XML-Deklaration voranstellen und als Blob speichern
const blob = new Blob(['<?xml version="1.0" encoding="UTF-8"?>\n', source], {
  type: 'image/svg+xml;charset=utf-8'
});
const url = URL.createObjectURL(blob);

const link = Object.assign(document.createElement('a'), {
  href: url,
  download: 'chart.svg'
});
link.click();
URL.revokeObjectURL(url);

Neues XML-Dokument aufbauen und per fetch senden

const doc = document.implementation.createDocument(null, 'order');
const item = doc.createElement('item');
item.setAttribute('sku', 'A-42');
item.textContent = 'Kaffee & Tee';
doc.documentElement.append(item);

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

const sendOrder = async () => {
  const res = await fetch('/api/orders', {
    method: 'POST',
    headers: { 'Content-Type': 'application/xml' },
    body
  });
  return res.ok;
};

<order><item sku="A-42">Kaffee & Tee</item></order>

Unterschied zu outerHTML bei HTML-Elementen

const p = document.createElement('p');
p.innerHTML = 'Zeile 1<br>Zeile 2';

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

Zeile 1 Zeile 2 Zeile 1 Zeile 2

// Wichtig · Fallstricke

Keine XML-Deklaration: Browser fügen beim Serialisieren eines Document meist kein <?xml ...?> hinzu (nur wenn vorhanden bzw. je nach Browser). Wer eine braucht, stellt sie selbst voran.
Keine Formatierung: Die Ausgabe wird nicht eingerückt. Leerraum-Textknoten bleiben so erhalten, wie sie im DOM stehen.
Namensräume: Bei HTML-Elementen wird xmlns="http://www.w3.org/1999/xhtml" ergänzt. Bei SVG sollte das Wurzelelement xmlns="http://www.w3.org/2000/svg" tragen, sonst lässt sich die exportierte Datei außerhalb des Browsers eventuell nicht öffnen.
Parsing-Fehler: Liefert DOMParser bei ungültigem XML ein Dokument mit <parsererror>, serialisiert XMLSerializer diesen Fehlerknoten ohne Hinweis mit – die Eingabe also vorher prüfen.
Sicherheit: Der erzeugte String ist Markup. Ihn per innerHTML in eine Seite einzufügen, kann XSS ermöglichen, wenn der Baum Nutzereingaben enthält (z. B. <script> oder Event-Attribute in SVG).
Kompatibilität: In allen modernen Browsern und in Web Workern nicht verfügbar (kein DOM). In Node.js gibt es die API erst über Bibliotheken wie jsdom oder @xmldom/xmldom.
Shadow-DOM-Inhalte werden nicht mitserialisiert.

Siehe auch

DOMParser Element.outerHTML Element.innerHTML DOMImplementation.createDocument() XSLTProcessor