new Document() — Methode · JavaScript-Referenz

Signatur

new Document()

Beschreibung

Der Konstruktor new Document() erzeugt ein komplett leeres Dokument: Es hat weder einen Doctype noch ein documentElement, also auch kein <html>, <head> oder <body>. Das Dokument gehört zu keinem Fenster (defaultView ist null). Es wird also nichts dargestellt und es werden keine Skripte ausgeführt.

Gebraucht wird so ein Dokument vor allem als isolierter Arbeitsbereich: Du kannst dort DOM-Bäume aufbauen, XML-artige Strukturen zusammensetzen oder Knoten aus dem aktuellen Dokument mit importNode() bzw. adoptNode() übernehmen, ohne die sichtbare Seite zu verändern.

Ein mit dem Konstruktor erzeugtes Dokument ist ein generisches Document und kein HTMLDocument (bzw. es verhält sich wie ein XML-Dokument): Neue Elemente bekommen den Namensraum null, createElement() wandelt Namen nicht in Kleinbuchstaben um, und der contentType ist application/xml. Für ein fertiges HTML-Grundgerüst ist document.implementation.createHTMLDocument() meist die bessere Wahl, zum Einlesen von Markup-Text DOMParser.

Rückgabewert

Typ

Document

Beschreibung

Ein neues, leeres Document ohne Kindknoten (childNodes.length === 0), ohne documentElement und mit defaultView === null.

Beispiele

Leeres Dokument erzeugen und untersuchen

const doc = new Document();

console.log(doc.childNodes.length);   // keine Knoten
console.log(doc.documentElement);     // kein Wurzelelement
console.log(doc.defaultView);         // kein Fenster
console.log(doc.contentType);

0 null null application/xml

Wurzelelement selbst anlegen und XML serialisieren

const doc = new Document();

// Mit Namensraum, damit die Elemente echte XML-Elemente sind
const ns = 'urn:example:bestellung';
const root = doc.createElementNS(ns, 'bestellung');
root.setAttribute('id', '4711');

const artikel = doc.createElementNS(ns, 'artikel');
artikel.textContent = 'Tastatur';
root.append(artikel);
doc.append(root);

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

<bestellung xmlns="urn:example:bestellung" id="4711"><artikel>Tastatur</artikel></bestellung>

Knoten aus der aktuellen Seite isoliert bearbeiten

// Ausgangsknoten auf der sichtbaren Seite
const original = document.createElement('ul');
original.innerHTML = '<li>Eins</li><li>Zwei</li>';

const sandbox = new Document();
// Tiefe Kopie ins isolierte Dokument übernehmen
const kopie = sandbox.importNode(original, true);
sandbox.append(kopie);

kopie.querySelectorAll('li').forEach((li) => {
  li.textContent = li.textContent.toUpperCase();
});

console.log(original.textContent); // unverändert
console.log(kopie.textContent);
console.log(kopie.ownerDocument === sandbox);

EinsZwei EINSZWEI true

// Wichtig · Fallstricke

Kein HTML-Gerüst: doc.body und doc.head sind null. Wenn du ein HTML-Dokument brauchst, nimm document.implementation.createHTMLDocument('Titel').
XML-Semantik: Elemente aus doc.createElement('div') sind keine HTMLDivElement-Instanzen und haben den Namensraum null. Eigenschaften wie style oder dataset fehlen also. Für HTML-Elemente nutze createElementNS('http://www.w3.org/1999/xhtml', 'div').
Nur ein Wurzelelement: Wird ein zweites Element direkt an das Dokument gehängt, wirft der Browser eine HierarchyRequestError-DOMException.
Sicherheit: In einem Dokument ohne Fenster laufen keine Skripte, und Bilder werden nicht geladen. Das eignet sich gut für eine Vorverarbeitung. Ersetzt aber keinen Sanitizer: Wer Markup später in die echte Seite übernimmt, muss es vorher bereinigen (z. B. mit DOMPurify), sonst droht XSS.
Kompatibilität: Den Konstruktor unterstützen alle modernen Browser. Im Internet Explorer gibt es ihn nicht, dort hilft document.implementation.createDocument(). In Node.js gibt es ihn nur über DOM-Implementierungen wie jsdom.

Siehe auch

Document new Comment() new DOMPoint() new DOMRect() new FocusEvent()