Node: Methode getRootNode()

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.

Die getRootNode()-Methode der Node-Schnittstelle gibt das Wurzelobjekt des Kontextobjekts zurück, welches optional das Shadow-Root einschließt, wenn es verfügbar ist.

In diesem Artikel

Syntax

js
getRootNode()
getRootNode(options)

Parameter

options Optional

Ein Objekt, das Optionen für das Abrufen des Root-Knotens festlegt. Die verfügbaren Optionen sind:

composed: Ein boolescher Wert, der angibt, ob das Shadow-Root (false, der Standardwert) oder ein Root-Knoten über das Shadow-Root hinaus (true) zurückgegeben werden soll.

Rückgabewert

Ein Objekt, das von Node erbt. Dies unterscheidet sich je nach Aufrufpunkt von getRootNode() in der genauen Form; zum Beispiel:

Bei einem Aufruf auf einem Element innerhalb einer Standardwebseite wird ein HTMLDocument-Objekt zurückgegeben, das die gesamte Seite (oder <iframe>) repräsentiert.
Bei einem Aufruf auf einem Element innerhalb eines Shadow-DOMs wird das zugehörige ShadowRoot zurückgegeben.
Bei einem Aufruf auf einem Element, das nicht an ein Dokument oder einen Shadow-Baum angehängt ist, wird die Wurzel des DOM-Baums, zu dem es gehört, zurückgegeben.

Beispiele

Beispiel 1

Das erste einfache Beispiel gibt eine Referenz auf den HTML-/Dokumentknoten zurück:

const rootNode = node.getRootNode();

Beispiel 2

Dieses komplexere Beispiel zeigt den Unterschied zwischen der Rückgabe eines normalen Roots und eines Roots, einschließlich des Shadow-Roots:

html
<div class="parent">
  <div class="child"></div>
</div>
<div class="shadowHost">shadowHost</div>
<pre id="output">Output: </pre>

js
const parent = document.querySelector(".parent");
const child = document.querySelector(".child");
const shadowHost = document.querySelector(".shadowHost");
const output = document.getElementById("output");

output.innerText += `\nparent's root: ${parent.getRootNode().nodeName}\n`; // #document
output.innerText += `child's  root: ${child.getRootNode().nodeName}\n\n`; // #document

// create a ShadowRoot
const shadowRoot = shadowHost.attachShadow({ mode: "open" });
shadowRoot.innerHTML =
  '<style>div{background:#2bb8aa;}</style><div class="shadowChild">shadowChild</div>';
const shadowChild = shadowRoot.querySelector(".shadowChild");

// The default value of composed is false
output.innerText += `shadowChild.getRootNode() === shadowRoot : ${
  shadowChild.getRootNode() === shadowRoot
}\n`; // true
output.innerText += `shadowChild.getRootNode({ composed:false }) === shadowRoot : ${
  shadowChild.getRootNode({ composed: false }) === shadowRoot
}\n`; // true
output.innerText += `shadowChild.getRootNode({ composed:true }).nodeName : ${
  shadowChild.getRootNode({ composed: true }).nodeName
}\n`; // #document

Dieses Beispiel gibt die Wurzel des nicht montierten Baums zurück. Beachten Sie, dass element hier die Wurzel des Baums ist (da es keine übergeordnete Instanz hat), daher ist per Definition seine Wurzel es selbst:

js
const element = document.createElement("p");
const child = document.createElement("span");

element.append(child);

const rootNode = child.getRootNode(); // <p><span></span></p>

element === rootNode; // true
element === element.getRootNode(); // true

Spezifikationen

Spezifikation

DOM
# ref-for-dom-node-getrootnode①

Browser-Kompatibilität

JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

Document Object Model (DOM)
Node
Instanzeigenschaften
Instanzmethoden
Events
1. selectstart
Vererbung
1. EventTarget
Verwandte Seiten für DOM
Anleitungen
1. Anatomie des DOM
2. Attributreflexion
3. Auswahl und Traversierung im DOM-Baum
4. Erstellen und Aktualisieren des DOM-Baums
5. Arbeiten mit Ereignissen