XMLDocument — Schnittstelle · JavaScript-Referenz

Signatur

interface XMLDocument extends Document

Beschreibung

XMLDocument ist die Dokument-Schnittstelle für XML-Inhalte (im Gegensatz zu HTML-Dokumenten). Solche Objekte entstehen zum Beispiel, wenn man XML-Text mit DOMParser.parseFromString() und dem MIME-Typ application/xml, text/xml oder image/svg+xml einliest, wenn man mit document.implementation.createDocument() ein neues Dokument anlegt oder wenn man bei XMLHttpRequest die Eigenschaft responseXML ausliest.

Die Schnittstelle erbt alles von Document, Node und EventTarget. Du kannst also mit querySelector(), getElementsByTagName(), createElement(), createElementNS() und den üblichen DOM-Methoden arbeiten. Der Unterschied zu HTML: XML-Dokumente beachten Groß- und Kleinschreibung, werden strikt nach XML-Regeln verarbeitet und kennen keine HTML-Sonderfälle wie document.body in der üblichen Form.

Praktisch nützlich ist XMLDocument beim Verarbeiten von RSS- und Atom-Feeds, SOAP-Antworten, SVG-Dateien, Konfigurationsdateien, KML-/GPX-Geodaten oder Office-XML-Formaten. Um ein Dokument wieder als Text auszugeben, verwendest du XMLSerializer.serializeToString().

Rückgabewert

Typ

XMLDocument

Beschreibung

Eine Instanz entsteht nicht über einen öffentlichen Konstruktor, sondern z. B. über new DOMParser().parseFromString(text, 'application/xml') oder document.implementation.createDocument(namespace, qualifiedName, doctype).

Beispiele

XML-Text mit DOMParser einlesen und auswerten

const xmlText = `<?xml version="1.0"?>
<buecher>
  <buch id="1"><titel>Faust</titel><preis>9.90</preis></buch>
  <buch id="2"><titel>Die Räuber</titel><preis>7.50</preis></buch>
</buecher>`;

const doc = new DOMParser().parseFromString(xmlText, 'application/xml');

console.log(doc instanceof XMLDocument);

const buecher = [...doc.querySelectorAll('buch')].map((b) => ({
  id: b.getAttribute('id'),
  titel: b.querySelector('titel').textContent,
  preis: Number(b.querySelector('preis').textContent)
}));

console.log(buecher);

true [{ id: '1', titel: 'Faust', preis: 9.9 }, { id: '2', titel: 'Die Räuber', preis: 7.5 }]

Parser-Fehler zuverlässig erkennen

const parseXml = (text) => {
  const doc = new DOMParser().parseFromString(text, 'application/xml');
  // Bei ungültigem XML wird KEIN Fehler geworfen, sondern ein <parsererror>-Element erzeugt
  const fehler = doc.querySelector('parsererror');
  if (fehler) {
    throw new Error(`Ungültiges XML: ${fehler.textContent.trim().split('\n')[0]}`);
  }
  return doc;
};

try {
  parseXml('<root><offen></root>');
} catch (e) {
  console.error(e.message);
}

Ungültiges XML: ... (Meldungstext unterscheidet sich je nach Browser)

Neues XML-Dokument aufbauen und serialisieren

const doc = document.implementation.createDocument(null, 'bestellung', null);
const root = doc.documentElement;
root.setAttribute('nr', '4711');

const artikel = [
  { sku: 'A-100', menge: 2 },
  { sku: 'B-200', menge: 1 }
];

for (const { sku, menge } of artikel) {
  const pos = doc.createElement('position');
  pos.setAttribute('sku', sku);
  pos.textContent = String(menge);
  root.appendChild(pos);
}

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

RSS-Feed per fetch laden und Titel auslesen

const ladeFeed = async (url) => {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  const text = await res.text();
  const doc = new DOMParser().parseFromString(text, 'application/xml');
  return [...doc.getElementsByTagName('item')].map((item) => ({
    titel: item.getElementsByTagName('title')[0]?.textContent ?? '',
    link: item.getElementsByTagName('link')[0]?.textContent ?? ''
  }));
};

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

// Wichtig · Fallstricke

Kein Fehler bei ungültigem XML: DOMParser wirft nichts, sondern liefert ein Dokument mit einem <parsererror>-Element. Das musst du immer selbst prüfen.
Groß-/Kleinschreibung und Namensräume: In XML ist <Item> nicht dasselbe wie <item>. Bei Namensräumen (z. B. Atom, SOAP) solltest du getElementsByTagNameNS() bzw. createElementNS() verwenden. Selektoren mit Präfixen wie dc:creator funktionieren in querySelector() nicht direkt.
MIME-Typ entscheidet: Mit 'text/html' liefert parseFromString() ein Document (HTML) statt eines XMLDocument, und die XML-Regeln gelten dann nicht.
Veraltete Methoden: Die nicht standardisierten XMLDocument.load() und async gab es früher in Firefox. Sie wurden entfernt, stattdessen fetch() und DOMParser nutzen.
Sicherheit: Browser lösen externe Entitäten nicht auf (kein XXE). Wenn du aber Inhalte aus einem XML-Dokument per innerHTML in eine HTML-Seite einfügst, besteht XSS-Gefahr. Nutze lieber textContent oder bereinige die Inhalte.
Kompatibilität: Wird von allen modernen Browsern unterstützt. In Node.js gibt es die Schnittstelle nicht eingebaut, dafür braucht man z. B. jsdom oder @xmldom/xmldom.

Siehe auch

Document DOMParser XMLSerializer DOMImplementation.createDocument() XMLHttpRequest.responseXML Element.getElementsByTagNameNS() HTMLDocument