Window.document — Eigenschaft · JavaScript-Referenz

Signatur

get Window.document

Beschreibung

Die Eigenschaft window.document ist der zentrale Einstiegspunkt ins DOM. Sie gibt das Document-Objekt der Seite zurück, die gerade im Fenster (oder in einem <iframe>) angezeigt wird. Darüber greifst du auf Elemente zu, erzeugst neue Knoten, liest Metadaten wie title oder URL und registrierst dokumentweite Event-Listener.

Weil window im Browser das globale Objekt ist, schreibt man meist nur document. Die ausgeschriebene Form window.document braucht man vor allem, wenn man auf das Dokument eines anderen Fensters zugreift, etwa über iframe.contentWindow.document, window.opener.document oder das Rückgabeobjekt von window.open().

Die Eigenschaft ist schreibgeschützt. Wird im Fenster eine neue Seite geladen, verweist window.document danach auf ein neues Document-Objekt. Alte Referenzen, die man in Variablen gespeichert hat, zeigen dann auf das veraltete Dokument.

Rückgabewert

Typ

Document

Beschreibung

Das Document-Objekt, das im Fenster geladen ist. Aus Skripten heraus ist es praktisch nie null.

Beispiele

Grundlegender Zugriff auf das Dokument

// window.document und document sind im selben Fenster identisch
console.log(window.document === document);
console.log(document.title);
console.log(document.readyState);

true "Meine Seite" "complete"

Element erzeugen und einfügen, sobald das DOM bereit ist

const init = () => {
  const hinweis = document.createElement('p');
  hinweis.textContent = 'Willkommen zurück!';
  document.body.append(hinweis);
};

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', init);
} else {
  init();
}

Auf das Dokument eines gleich-originigen iframes zugreifen

const frame = document.querySelector('#vorschau');

frame.addEventListener('load', () => {
  // Funktioniert nur bei gleicher Origin
  const frameDoc = frame.contentWindow.document;
  const ueberschrift = frameDoc.querySelector('h1');
  console.log(ueberschrift?.textContent);
});

"Vorschau-Titel"

Dokument eines per window.open geöffneten Fensters befüllen

const popup = window.open('', 'druck', 'width=600,height=400');

if (popup) {
  const doc = popup.document;
  doc.title = 'Druckansicht';
  const inhalt = doc.createElement('pre');
  inhalt.textContent = 'Bestellnummer: 4711';
  doc.body.append(inhalt);
}

// Wichtig · Fallstricke

Same-Origin-Policy: Auf otherWindow.document eines fremden Ursprungs (iframe, Popup) zuzugreifen löst einen SecurityError (DOMException) aus. Für die Kommunikation zwischen Ursprüngen nimmt man window.postMessage().
Veraltete Referenzen: Nach einer Navigation im Fenster oder iframe gehört ein gespeichertes document zur alten Seite. Hole die Referenz nach jedem load-Event neu.
Frühes iframe-Dokument: Direkt nach dem Einfügen eines iframes enthält contentWindow.document oft noch ein leeres about:blank-Dokument. Warte daher auf das load-Event.
Nicht in Workern oder Node.js: In Web Workern, Service Workern und Node.js gibt es kein window und kein document. Mit typeof document !== 'undefined' kannst du vorher prüfen, ob es existiert (z. B. bei SSR).
Die Eigenschaft ist schreibgeschützt. Eine Zuweisung an window.document wird ignoriert.
Wird in allen Browsern seit jeher unterstützt.

Siehe auch

Document Window Window.open() Window.event Window.parent