Document.implementation — Eigenschaft · JavaScript-Referenz

Signatur

get Document.implementation

Beschreibung

Die Eigenschaft document.implementation ist schreibgeschützt und liefert das DOMImplementation-Objekt, das zum aktuellen Dokument gehört. Es arbeitet unabhängig von einem bestimmten Dokumentinhalt. Mit seinen Fabrikmethoden erzeugen Sie neue, eigenständige Dokumente, die nicht in die aktuelle Seite eingehängt sind.

Diese Methoden stehen zur Verfügung:

createHTMLDocument(title) – erzeugt ein leeres HTML-Dokument mit <html>, <head>, <title> und <body>.
createDocument(namespaceURI, qualifiedName, doctype) – erzeugt ein XMLDocument, z. B. für SVG oder eigene XML-Formate.
createDocumentType(qualifiedName, publicId, systemId) – erzeugt einen DocumentType-Knoten.
hasFeature() – veraltet, liefert immer true.

Typische Einsatzfälle sind das Parsen und Bereinigen von HTML-Fragmenten in einem inerten Dokument, in dem keine Skripte laufen und keine Bilder geladen werden. Weitere Fälle sind das Erzeugen von XML-Dokumenten zur Serialisierung sowie Tests, bei denen ein frisches DOM gebraucht wird, ohne die aktuelle Seite zu verändern.

Rückgabewert

Typ

DOMImplementation

Beschreibung

Das zum Dokument gehörende DOMImplementation-Objekt. Für dasselbe Dokument ist es immer dieselbe Instanz.

Beispiele

Leeres HTML-Dokument erzeugen und befüllen

const doc = document.implementation.createHTMLDocument('Bericht');
const p = doc.createElement('p');
p.textContent = 'Erstellt außerhalb der aktuellen Seite.';
doc.body.append(p);

console.log(doc.title);
console.log(doc.documentElement.outerHTML);

Bericht <html><head><title>Bericht</title></head><body><p>Erstellt außerhalb der aktuellen Seite.</p></body></html>

HTML-Fragment in einem inerten Dokument untersuchen

const untrusted = '<img src="x" onerror="alert(1)"><b>Hallo</b>';

const sandbox = document.implementation.createHTMLDocument('');
sandbox.body.innerHTML = untrusted; // kein Laden, kein onerror

// Event-Handler-Attribute entfernen
sandbox.body.querySelectorAll('*').forEach((el) => {
  [...el.attributes]
    .filter((a) => a.name.startsWith('on'))
    .forEach((a) => el.removeAttribute(a.name));
});

console.log(sandbox.body.innerHTML);

<img src="x"><b>Hallo</b>

XML-Dokument mit Doctype erzeugen und serialisieren

const impl = document.implementation;
const doctype = impl.createDocumentType('bestellung', '', 'bestellung.dtd');
const xml = impl.createDocument(null, 'bestellung', doctype);

const artikel = xml.createElement('artikel');
artikel.setAttribute('id', '42');
artikel.textContent = 'Tastatur';
xml.documentElement.append(artikel);

console.log(new XMLSerializer().serializeToString(xml));

<!DOCTYPE bestellung SYSTEM "bestellung.dtd"><bestellung><artikel id="42">Tastatur</artikel></bestellung>

SVG-Dokument im richtigen Namensraum anlegen

const SVG_NS = 'http://www.w3.org/2000/svg';
const svgDoc = document.implementation.createDocument(SVG_NS, 'svg', null);

const circle = svgDoc.createElementNS(SVG_NS, 'circle');
circle.setAttribute('r', '10');
svgDoc.documentElement.append(circle);

console.log(svgDoc.documentElement.namespaceURI);

http://www.w3.org/2000/svg

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung an document.implementation hat keine Wirkung. Im Strict Mode wirft sie einen TypeError.
Inerte Dokumente sind keine vollständige Absicherung gegen XSS: Solange ein Knoten im erzeugten Dokument bleibt, laufen dort keine Skripte und es werden keine Ressourcen geladen. Das ändert sich, sobald Sie Knoten mit document.importNode()/adoptNode() übernehmen oder das Markup über innerHTML in die aktuelle Seite einfügen. Dann werden gefährliche Attribute wie onerror oder javascript:-URLs aktiv. Für echtes Bereinigen von HTML nutzen Sie eine geprüfte Bibliothek wie DOMPurify oder die Sanitizer-API, sobald sie verfügbar ist.
Skripte: <script>-Elemente, die per innerHTML eingefügt werden, führt der Browser grundsätzlich nicht aus – weder im erzeugten noch im aktuellen Dokument.
createDocument() liefert ein XMLDocument. Dort sind Element- und Attributnamen case-sensitiv. Für HTML-Elemente brauchen Sie den XHTML-Namensraum http://www.w3.org/1999/xhtml, sonst verhalten sich die Elemente nicht wie HTML-Elemente.
hasFeature() ist veraltet und gibt in modernen Browsern immer true zurück. Für Feature-Erkennung taugt die Methode deshalb nicht.
Kompatibilität: Die Eigenschaft wird von allen Browsern unterstützt. In Node.js gibt es sie nicht nativ, wohl aber in DOM-Implementierungen wie jsdom oder happy-dom.

Siehe auch

DOMImplementation DOMImplementation.createHTMLDocument() DOMImplementation.createDocument() DOMImplementation.createDocumentType() Document.importNode()