Signatur
Beschreibung
DOMImplementation ist eine Hilfsschnittstelle, die Operationen bündelt, die an kein bestimmtes Dokument gebunden sind. Man erzeugt sie nicht selbst: Jedes Document stellt über die Eigenschaft document.implementation ein fertiges Objekt bereit.
Die Schnittstelle bietet vier Methoden:
createHTMLDocument(title): erzeugt ein neues, leeres HTML-Dokument mit<html>,<head>,<title>und<body>.createDocument(namespaceURI, qualifiedName, doctype): erzeugt ein neuesXMLDocument, z. B. für SVG oder eigene XML-Formate.createDocumentType(qualifiedName, publicId, systemId): erzeugt einenDocumentType-Knoten, der sich ancreateDocument()übergeben lässt.hasFeature(): veraltet, gibt aus Kompatibilitätsgründen immertruezurück.
In der Praxis braucht man das vor allem für inaktive Dokumente: HTML lässt sich dort parsen und bearbeiten, ohne dass Skripte laufen, Bilder geladen werden oder die sichtbare Seite neu berechnet wird. Typische Einsätze sind HTML-Vorverarbeitung, Tests, das Erzeugen von XML-Exporten und isolierte DOM-Bäume, deren Knoten man später mit document.importNode() oder adoptNode() in die sichtbare Seite übernimmt.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $title | string | Nur bei createHTMLDocument(): Titel des neuen Dokuments. Fehlt er, wird auch kein <title>-Element angelegt. |
|
| $namespaceURI Pflicht | string|null | Nur bei createDocument(): Namensraum des Wurzelelements, z. B. "http://www.w3.org/2000/svg", oder null. |
|
| $qualifiedName Pflicht | string | Bei createDocument() der Name des Wurzelelements (leerer String = kein Wurzelelement), bei createDocumentType() der Doctype-Name, z. B. "svg:svg". |
|
| $doctype | DocumentType|null | null | Nur bei createDocument(): optionaler Doctype-Knoten, erzeugt mit createDocumentType(). |
| $publicId Pflicht | string | Nur bei createDocumentType(): öffentlicher Bezeichner (PUBLIC-Kennung) des Doctypes. |
|
| $systemId Pflicht | string | Nur bei createDocumentType(): Systembezeichner, meist die URL der DTD. |
Rückgabewert
createHTMLDocument() liefert ein Document, createDocument() ein XMLDocument, createDocumentType() einen DocumentType und hasFeature() immer true.Beispiele
Zugriff auf die Instanz und neues HTML-Dokument erzeugen
// DOMImplementation wird nicht instanziiert, sondern über das Dokument bezogen
const impl = document.implementation;
console.log(impl instanceof DOMImplementation);
const doc = impl.createHTMLDocument('Bericht');
const p = doc.createElement('p');
p.textContent = 'Erstellt in einem separaten Dokument';
doc.body.append(p);
console.log(doc.title);
console.log(doc.body.innerHTML);Fremdes HTML inaktiv parsen und Links auslesen
const html = '<article><a href="/a">A</a><img src="x" onerror="alert(1)"><a href="/b">B</a></article>';
// Im inaktiven Dokument werden weder Bilder geladen noch Handler ausgeführt
const sandbox = document.implementation.createHTMLDocument('');
sandbox.body.innerHTML = html;
const links = [...sandbox.querySelectorAll('a')].map(a => a.getAttribute('href'));
console.log(links);
// Gewünschten Teil in die echte Seite übernehmen
const article = document.importNode(sandbox.querySelector('article'), true);
article.querySelectorAll('img').forEach(img => img.remove());
document.body.append(article);SVG-Dokument mit Doctype erzeugen und serialisieren
const SVG_NS = 'http://www.w3.org/2000/svg';
const impl = document.implementation;
const doctype = impl.createDocumentType(
'svg',
'-//W3C//DTD SVG 1.1//EN',
'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'
);
const svgDoc = impl.createDocument(SVG_NS, 'svg', doctype);
const circle = svgDoc.createElementNS(SVG_NS, 'circle');
circle.setAttribute('cx', '50');
circle.setAttribute('cy', '50');
circle.setAttribute('r', '40');
svgDoc.documentElement.append(circle);
console.log(new XMLSerializer().serializeToString(svgDoc));XML-Export für eine Datenliste
const produkte = [{ id: 1, name: 'Tisch' }, { id: 2, name: 'Stuhl' }];
const xml = document.implementation.createDocument(null, 'produkte', null);
for (const { id, name } of produkte) {
const el = xml.createElement('produkt');
el.setAttribute('id', id);
el.textContent = name;
xml.documentElement.append(el);
}
console.log(new XMLSerializer().serializeToString(xml));// Wichtig · Fallstricke
Keine eigene Instanz: new DOMImplementation() wirft einen TypeError. Verwende immer document.implementation.
Sicherheit: In einem mit createHTMLDocument() erzeugten Dokument laufen keine Skripte, und onerror-Handler werden beim Parsen nicht ausgelöst. Das Dokument ist aber kein Bereinigungswerkzeug: Übernimmst du Knoten per importNode()/adoptNode() in die sichtbare Seite, werden gefährliche Attribute wie onerror oder javascript:-URLs dort aktiv (XSS). Bereinige Fremd-HTML vorher, z. B. mit DOMPurify, und prüfe Trusted Types bzw. die Content Security Policy (CSP).
Knoten gehören zu ihrem Dokument: Elemente aus einem neuen Dokument hängt man mit append() zwar oft stillschweigend in ein anderes ein (implizites Adoptieren), sauberer ist aber importNode(). Bei createDocument() immer createElementNS() mit dem passenden Namensraum verwenden, sonst landen SVG-Elemente im falschen Namensraum und werden nicht gerendert.
Veraltet: hasFeature() gibt immer true zurück und taugt nicht zur Feature-Erkennung. Prüfe stattdessen direkt, ob die gewünschte Eigenschaft oder Methode existiert.
Kompatibilität: Alle Methoden laufen in allen modernen Browsern. In Node.js gibt es kein DOM; nutze dort Bibliotheken wie jsdom. Wer nur HTML-Text parsen will, greift oft zur Alternative DOMParser.