DOMParser — Schnittstelle · JavaScript-Referenz

Signatur

interface DOMParser

Beschreibung

Mit DOMParser baust du aus einem Text-String einen vollständigen DOM-Baum, den du mit den üblichen DOM-Methoden wie querySelector(), getElementsByTagName() oder textContent durchsuchen und auswerten kannst. Die Schnittstelle hat genau eine Methode: parseFromString(string, mimeType). Sie gibt je nach MIME-Typ ein Document (HTML) oder ein XMLDocument (XML, SVG, XHTML) zurück.

Typische Einsatzfälle sind das Auswerten von XML-Antworten (RSS-/Atom-Feeds, SOAP, Konfigurationsdateien), das Auslesen von Daten aus per fetch() geladenen HTML-Seiten, das Laden von SVG-Markup als DOM oder das sichere Vorab-Prüfen von HTML-Fragmenten, bevor Teile davon ins sichtbare Dokument übernommen werden.

Das erzeugte Dokument ist vom aktuellen Dokument getrennt: Es wird nicht gerendert, Skripte darin werden nicht ausgeführt und Ressourcen wie Bilder werden beim Parsen nicht geladen. Knoten daraus kannst du mit document.importNode() oder document.adoptNode() (bzw. implizit durch append()) ins eigene Dokument übernehmen.

Wichtig: Der DOMParser wirft bei fehlerhaftem XML keine Ausnahme. Stattdessen enthält das Ergebnis-Dokument ein <parsererror>-Element, das du selbst prüfen musst. HTML wird dagegen immer fehlertolerant geparst, so wie es der Browser auch bei normalen Seiten tut.

Parameter

Name	Typ	Default	Beschreibung
$string Pflicht	string \| TrustedHTML		Der zu parsende Quelltext. Bei aktivierten Trusted Types muss bei `"text/html"` ein `TrustedHTML`-Objekt übergeben werden.
$mimeType Pflicht	"text/html" \| "text/xml" \| "application/xml" \| "application/xhtml+xml" \| "image/svg+xml"		Legt den Parser fest: `"text/html"` nutzt den HTML-Parser und liefert ein `Document`, alle anderen Werte nutzen den XML-Parser und liefern ein `XMLDocument`. Andere Werte führen zu einem `TypeError`.

Rückgabewert

Typ

Document | XMLDocument

Beschreibung

new DOMParser() liefert eine Parser-Instanz. Deren Methode parseFromString() gibt ein neues, eigenständiges Document (bei "text/html") bzw. XMLDocument (bei XML-Typen) zurück. Bei XML-Syntaxfehlern enthält es ein <parsererror>-Element.

Beispiele

HTML-String parsen und Daten auslesen

const parser = new DOMParser();
const html = `
  <ul id="produkte">
    <li data-preis="19.90">Tastatur</li>
    <li data-preis="49.00">Maus</li>
  </ul>`;

const doc = parser.parseFromString(html, 'text/html');
const produkte = [...doc.querySelectorAll('#produkte li')].map((li) => ({
  name: li.textContent.trim(),
  preis: Number(li.dataset.preis)
}));

console.log(produkte);

[ { name: 'Tastatur', preis: 19.9 }, { name: 'Maus', preis: 49 } ]

RSS-Feed per fetch laden und als XML auswerten

const ladeFeed = async (url) => {
  const antwort = await fetch(url);
  const text = await antwort.text();
  const xml = new DOMParser().parseFromString(text, 'application/xml');

  return [...xml.querySelectorAll('item')].map((item) => ({
    titel: item.querySelector('title')?.textContent ?? '',
    link: item.querySelector('link')?.textContent ?? ''
  }));
};

ladeFeed('/feed.xml').then((eintraege) => console.table(eintraege));

XML-Parserfehler erkennen

const parseXml = (text) => {
  const doc = new DOMParser().parseFromString(text, 'application/xml');
  const fehler = doc.querySelector('parsererror');
  if (fehler) {
    throw new SyntaxError(`Ungültiges XML: ${fehler.textContent.trim().split('\n')[0]}`);
  }
  return doc;
};

try {
  parseXml('<config><wert>1</config>');
} catch (e) {
  console.error(e.name); 
}

SyntaxError

SVG-Markup parsen und ins Dokument einfügen

const svgText = '<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="20" cy="20" r="18" fill="tomato"/></svg>';

const svgDoc = new DOMParser().parseFromString(svgText, 'image/svg+xml');
const svg = document.importNode(svgDoc.documentElement, true);
document.body.append(svg);

console.log(svg instanceof SVGSVGElement);

true

// Wichtig · Fallstricke

Keine Ausnahme bei XML-Fehlern: Prüfe immer auf ein <parsererror>-Element. Wie es genau aufgebaut ist, unterscheidet sich zwischen den Browsern (in Firefox ist es z. B. das Wurzelelement), deshalb am besten per querySelector('parsererror') suchen.
Kein Schutz vor XSS: Beim Parsen werden <script>-Elemente zwar nicht ausgeführt, fügst du die Knoten aber später ins sichtbare Dokument ein, laufen Event-Handler-Attribute wie onerror oder javascript:-URLs trotzdem. Nicht vertrauenswürdiges HTML vorher bereinigen (z. B. mit DOMPurify oder der Sanitizer-API) und bevorzugt textContent statt Markup übernehmen.
Trusted Types / CSP: Mit require-trusted-types-for 'script' akzeptiert parseFromString(…, 'text/html') nur noch TrustedHTML.
HTML-Fragmente werden in ein vollständiges Dokument mit <html>, <head> und <body> gepackt. Elemente wie <tr> ohne <table> werden dabei verworfen. Für Fragmente ist oft <template> oder Range.createContextualFragment() besser geeignet.
Bei XML-Dokumenten mit Namensräumen (z. B. Atom) ggf. getElementsByTagNameNS() verwenden. Groß-/Kleinschreibung spielt im XML-Modus eine Rolle.
Die Rückrichtung (DOM → String) übernimmt XMLSerializer. In Node.js gibt es DOMParser nicht von Haus aus; dort helfen Bibliotheken wie jsdom oder linkedom.

Siehe auch

XMLSerializer Document XMLDocument Document.prototype.importNode() Element.innerHTML Range.prototype.createContextualFragment()