</> programmierung.net
Start · Sprachen · JavaScript · Referenz · XMLSerializer.serializeToString()

XMLSerializer.serializeToString()

Methode

Wandelt einen DOM-Knoten samt Unterbaum in eine XML-Zeichenkette um – etwa um SVG, XML-Dokumente oder Fragmente zu speichern oder zu versenden.

seit JavaScript Baseline: alle Browser Kategorie: webapi

Signatur

XMLSerializer.prototype.serializeToString(rootNode)

Beschreibung

serializeToString() ist die Methode eines XMLSerializer-Objekts. Sie nimmt einen DOM-Knoten entgegen und gibt ihn mit seinem ganzen Unterbaum als XML-Zeichenkette zurück. Das Gegenstück ist DOMParser.parseFromString(): Damit wird aus einer Zeichenkette wieder ein DOM.

Typische Anwendungsfälle:

  • ein erzeugtes oder verändertes SVG exportieren, zum Beispiel als Download oder als Data-URL für ein <img> oder <canvas>,
  • ein mit DOMParser oder document.implementation.createDocument() erzeugtes XML-Dokument nach einer Änderung wieder als Text speichern oder per fetch() senden,
  • HTML-Elemente als wohlgeformtes XHTML ausgeben.

Die Ausgabe folgt den Regeln der XML-Serialisierung: Leere Elemente werden selbstschließend geschrieben (<br />), Sonderzeichen werden maskiert und Namensräume werden als xmlns-Attribute ergänzt, wenn sie nötig sind. Bei HTML-Elementen erscheint deshalb meist xmlns="http://www.w3.org/1999/xhtml". Wer HTML-Markup ohne diese Eigenheiten braucht, nimmt besser outerHTML oder innerHTML.

Parameter

Name Typ Default Beschreibung
$rootNode Pflicht Node Der Knoten, der samt Unterbaum umgewandelt wird. Erlaubt sind zum Beispiel Document, Element, DocumentFragment, Text, Comment und Attr. Ist der Wert kein Node, wird ein TypeError ausgelöst.

Rückgabewert

Typ
string
Beschreibung
Eine Zeichenkette mit der XML-Darstellung von rootNode und allen Nachfahren.

Beispiele

SVG-Element als Datei herunterladen

const svg = document.querySelector('svg');
const serializer = new XMLSerializer();
const svgText = serializer.serializeToString(svg);

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

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

XML parsen, ändern und wieder serialisieren

const xml = '<config><option name="theme">hell</option></config>';
const doc = new DOMParser().parseFromString(xml, 'application/xml');

doc.querySelector('option[name="theme"]').textContent = 'dunkel';
const neu = doc.createElement('option');
neu.setAttribute('name', 'lang');
neu.textContent = 'de & en';
doc.documentElement.append(neu);

console.log(new XMLSerializer().serializeToString(doc));
<config><option name="theme">dunkel</option><option name="lang">de &amp; en</option></config>

Unterschied zu outerHTML bei HTML-Elementen

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

console.log(div.outerHTML);
console.log(new XMLSerializer().serializeToString(div));
<div>Zeile 1<br>Zeile 2</div> <div xmlns="http://www.w3.org/1999/xhtml">Zeile 1<br />Zeile 2</div>

SVG als Data-URL in ein Canvas zeichnen

const svgToImage = (svg) => new Promise((resolve, reject) => {
  const text = new XMLSerializer().serializeToString(svg);
  const img = new Image();
  img.onload = () => resolve(img);
  img.onerror = reject;
  img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(text);
});

const img = await svgToImage(document.querySelector('svg'));
const ctx = document.querySelector('canvas').getContext('2d');
ctx.drawImage(img, 0, 0);

// Wichtig · Fallstricke

  • Keine XML-Deklaration: Beim Umwandeln eines Document wird kein <?xml version="1.0"?> vorangestellt, sofern sie nicht als Knoten vorhanden ist. Bei Bedarf muss man sie selbst voranstellen.
  • Keine Formatierung: Es werden weder Einrückungen noch Zeilenumbrüche eingefügt. Vorhandener Leerraum bleibt so, wie er in den Textknoten steht.
  • Nur DOM-Zustand: Umgewandelt wird nur das Markup. Berechnete CSS-Stile, externe Stylesheets, der aktuelle value von Formularfeldern (sofern er nicht als Attribut gesetzt ist) und der Inhalt von Canvas-Elementen gehen verloren. Soll ein SVG außerhalb der Seite gleich aussehen, müssen die Stile inline im SVG stehen.
  • Namensräume: SVG-Elemente, die über createElement() statt über createElementNS() erzeugt wurden, erhalten den XHTML-Namensraum und werden später nicht als SVG dargestellt.
  • Sicherheit: Das Ergebnis ist Markup. Stammt es aus fremden Quellen und wird es wieder per innerHTML oder als SVG-Bild eingefügt, besteht XSS-Gefahr, etwa durch Event-Handler-Attribute oder <script> in SVG. Solche Inhalte vorher bereinigen.
  • Kompatibilität: Wird von allen modernen Browsern seit Langem unterstützt. In Node.js fehlt die Methode nativ; dort stellen Bibliotheken wie jsdom oder @xmldom/xmldom einen XMLSerializer bereit.

Siehe auch

XMLSerializer DOMParser.parseFromString() DOMParser Element.outerHTML Element.innerHTML Document.createElementNS()
← Vorheriger Eintrag XMLSerializer