Node: getRootNode() method
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
The getRootNode()
method of the Node
interface
returns the context object's root,
which optionally includes the shadow root if it is available.
Syntax
getRootNode()
getRootNode(options)
Parameters
options
Optional-
An object that sets options for getting the root node. The available options are:
-
composed
: A boolean value that indicates whether the shadow root should be returned (false
, the default), or a root node beyond shadow root (true
).
-
Return value
An object inheriting from Node
. This will differ in exact form depending
on where you call getRootNode()
; for example:
-
Calling it on an element inside a standard web page will return an
HTMLDocument
object representing the entire page (or<iframe>
). -
Calling it on an element inside a shadow DOM will return the associated
ShadowRoot
. - Calling it on an element that is not attached to a document or a shadow tree will return the root of the DOM tree it belongs to.
Examples
Example 1
The first simple example returns a reference to the HTML/document node:
const rootNode = node.getRootNode();
Example 2
This more complex example shows the difference between returning a normal root, and a root including the shadow root:
<div class="parent">
<div class="child"></div>
</div>
<div class="shadowHost">shadowHost</div>
<pre id="output">Output: </pre>
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
Example 3
This example returns the root of the unmounted tree.
Note element
here is the root of the tree (as it has no parent), so by definition its root is itself:
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
Specifications
Specification |
---|
DOM Standard # ref-for-dom-node-getrootnode① |
Browser compatibility
BCD tables only load in the browser