Node.ownerDocument — Eigenschaft · JavaScript-Referenz

Signatur

get Node.ownerDocument

Beschreibung

Node.ownerDocument gibt das Document zurück, in dessen Kontext ein Knoten erzeugt oder in das er übernommen wurde. Das gilt auch für Knoten, die (noch) nicht im DOM-Baum hängen: Ein mit document.createElement() erzeugtes Element hat bereits document als ownerDocument, auch vor dem Einfügen.

Nützlich ist die Eigenschaft vor allem in wiederverwendbarem Code, der mit mehreren Dokumenten arbeitet – etwa mit <iframe>-Inhalten, Pop-up-Fenstern, per DOMParser erzeugten Dokumenten oder document.implementation.createHTMLDocument(). Statt global auf document zuzugreifen, erzeugt man neue Knoten über node.ownerDocument.createElement() und bleibt so im richtigen Dokument. Über ownerDocument.defaultView erreicht man zudem das zugehörige window.

Ist der Knoten selbst ein Document, ist der Wert null. Bei einem DocumentType oder Elementen in einem Shadow-Root ist es das Dokument, das auch den Host enthält. Für den tatsächlichen Wurzelknoten des Baums (z. B. einen ShadowRoot oder ein losgelöstes Fragment) ist dagegen getRootNode() die richtige Wahl.

Rückgabewert

Typ

Document | null

Beschreibung

Das Document, dem der Knoten gehört; null, wenn der Knoten selbst ein Document ist.

Beispiele

Grundlegende Abfrage

const p = document.querySelector('p');
console.log(p.ownerDocument === document);

// Auch nicht eingefügte Knoten haben ein ownerDocument
const div = document.createElement('div');
console.log(div.ownerDocument === document);

// Ein Dokument selbst hat keines
console.log(document.ownerDocument);

true true null

Knoten im richtigen Dokument erzeugen (iframe-sicher)

// Fügt ein Hinweis-Element neben ein beliebiges Ziel ein –
// funktioniert auch, wenn das Ziel in einem iframe liegt.
const addHint = (target, text) => {
  const doc = target.ownerDocument;
  const hint = doc.createElement('span');
  hint.className = 'hint';
  hint.textContent = text;
  target.after(hint);
  return hint;
};

const frame = document.querySelector('iframe');
const input = frame.contentDocument.querySelector('input');
addHint(input, 'Pflichtfeld');
console.log(input.ownerDocument === frame.contentDocument);

true

Zugehöriges window ermitteln

// z. B. für Maße oder Styles im richtigen Fenster-Kontext
const getWindowOf = (node) => node.ownerDocument?.defaultView ?? null;

const el = document.body;
const win = getWindowOf(el);
console.log(win === window);
console.log(win.getComputedStyle(el).display);

true block

Dokument aus DOMParser

const parser = new DOMParser();
const xml = parser.parseFromString('<root><item/></root>', 'application/xml');
const item = xml.querySelector('item');

console.log(item.ownerDocument === xml);
console.log(item.ownerDocument === document);

// In das aktuelle Dokument übernehmen
const adopted = document.adoptNode(item);
console.log(adopted.ownerDocument === document);

true false true

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung an ownerDocument hat keine Wirkung (im Strict Mode gibt es einen TypeError). Um einen Knoten in ein anderes Dokument zu verschieben, nutzt man document.adoptNode() oder document.importNode() (Kopie).
null bei Dokumenten: Generischer Code, der beliebige Knoten verarbeitet, sollte das abfangen, z. B. mit node.ownerDocument ?? node.
Nicht gleich „im DOM“: ownerDocument sagt nichts darüber aus, ob der Knoten eingehängt ist – dafür dient node.isConnected.
Shadow DOM: Knoten in einem Shadow-Root liefern das Host-Dokument, nicht den ShadowRoot. Für Letzteres getRootNode() verwenden.
Andere Fenster: Bei iframes anderer Herkunft (Cross-Origin) ist contentDocument nicht zugänglich; instanceof-Prüfungen scheitern außerdem zwischen Fenstern, da jedes eigene Konstruktoren hat.
Seit Anfang an in allen Browsern unterstützt; auch in DOM-Implementierungen wie jsdom verfügbar.

Siehe auch

Node.getRootNode() Node.isConnected Document.adoptNode() Document.importNode() Document.defaultView HTMLIFrameElement.contentDocument Node