new DOMParser() — Methode · JavaScript-Referenz

Signatur

new DOMParser()

Beschreibung

Mit new DOMParser() erzeugst du ein Parser-Objekt. Der Konstruktor nimmt keine Argumente an. Die eigentliche Arbeit übernimmt danach die Methode parseFromString(string, mimeType): Sie liest einen Quelltext-String und gibt ein vollständiges Document zurück (bei HTML ein HTMLDocument, bei XML ein XMLDocument).

Typische Einsätze sind das Verarbeiten von XML-Antworten (RSS-Feeds, SOAP, Konfigurationsdateien), das Auslesen von Daten aus HTML-Fragmenten, die per fetch() geladen wurden, und das Umwandeln von SVG-Markup in DOM-Knoten. Weil das Ergebnis ein eigenes, vom aktuellen Dokument getrenntes Dokument ist, kannst du darin mit querySelector() und Co. suchen, ohne die sichtbare Seite zu verändern.

Ein Parser-Objekt lässt sich beliebig oft wiederverwenden – es hat keinen internen Zustand, der sich zwischen Aufrufen ändert. Wichtig: Beim Parsen von HTML werden <script>-Elemente nicht ausgeführt. Beim Einfügen der geparsten Knoten ins aktive Dokument können Event-Handler-Attribute wie onerror aber sehr wohl wirksam werden.

Rückgabewert

Typ

DOMParser

Beschreibung

Eine neue DOMParser-Instanz, deren Methode parseFromString() Strings in Document-Objekte umwandelt.

Beispiele

HTML-Fragment parsen und auslesen

const parser = new DOMParser();
const html = '<ul><li>Äpfel</li><li>Birnen</li></ul>';
const doc = parser.parseFromString(html, 'text/html');

const items = [...doc.querySelectorAll('li')].map(li => li.textContent);
console.log(items);

["Äpfel", "Birnen"]

XML-Antwort parsen mit Fehlerprüfung

const parser = new DOMParser();

const parseXml = (xmlString) => {
  const doc = parser.parseFromString(xmlString, 'application/xml');
  // Bei ungültigem XML wirft DOMParser keinen Fehler, sondern liefert <parsererror>
  const error = doc.querySelector('parsererror');
  if (error) throw new Error('Ungültiges XML: ' + error.textContent);
  return doc;
};

const doc = parseXml('<config><port>8080</port><host>localhost</host></config>');
console.log(doc.querySelector('port').textContent);

try {
  parseXml('<config><port>8080</config>');
} catch (e) {
  console.log(e.message.startsWith('Ungültiges XML'));
}

8080 true

RSS-Feed per fetch laden und Titel extrahieren

const loadFeedTitles = async (url) => {
  const response = await fetch(url);
  const text = await response.text();
  const doc = new DOMParser().parseFromString(text, 'text/xml');
  return [...doc.querySelectorAll('item > title')].map(t => t.textContent);
};

loadFeedTitles('/feed.xml').then(titles => console.log(titles));

["Erster Artikel", "Zweiter Artikel", ...]

SVG-String in einen DOM-Knoten umwandeln

const svgMarkup = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><circle cx="10" cy="10" r="8" fill="tomato"/></svg>';
const svgDoc = new DOMParser().parseFromString(svgMarkup, 'image/svg+xml');
const svgElement = document.importNode(svgDoc.documentElement, true);
document.body.append(svgElement);
console.log(svgElement.tagName);

svg

// Wichtig · Fallstricke

Sicherheit (XSS): DOMParser führt beim Parsen keine Skripte aus. Fügst du die Knoten aber ins aktive Dokument ein, können Attribute wie <img src=x onerror="..."> Code ausführen. Nicht vertrauenswürdiges HTML vorher bereinigen (z. B. mit DOMPurify oder der Sanitizer-API) und eine strikte CSP verwenden. Bei aktivierten Trusted Types verlangt parseFromString() für text/html ein TrustedHTML-Objekt.
Kein Fehler bei ungültigem XML: Statt einer Exception enthält das Ergebnis ein <parsererror>-Element – immer darauf prüfen. HTML-Parsing ist fehlertolerant und liefert immer ein Dokument.
Erlaubte MIME-Typen: text/html, text/xml, application/xml, application/xhtml+xml, image/svg+xml. Andere Werte lösen einen TypeError aus.
Der Konstruktor muss mit new aufgerufen werden; ein Aufruf ohne new wirft einen TypeError.
Geparste Knoten gehören zu einem fremden Dokument – vor dem Einfügen gegebenenfalls document.importNode() oder document.adoptNode() verwenden (append() übernimmt sie meist automatisch).
Kompatibilität: In allen modernen Browsern verfügbar, auch in Web Workern nicht (dort fehlt DOMParser). In Node.js gibt es keinen eingebauten DOMParser; nutze Bibliotheken wie jsdom oder linkedom.
Für kleine HTML-Fragmente ist document.createRange().createContextualFragment() oder ein <template>-Element oft die schlankere Alternative.

Siehe auch

DOMParser DOMParser.prototype.parseFromString() XMLSerializer Document Document.prototype.importNode() Element.innerHTML new CloseWatcher()