The getRootNode()
method of the Node
interface returns the context object's root, which optionally includes the shadow root if it is available.
Syntax
var root = node.getRootNode(options);
Parameters
options
Optional- An object that sets options for getting the root node. The available options are:
composed
: ABoolean
that indicates whether the shadow root should be returned (false
, the default), or a root node beyond shadow root (true
).
Returns
An object inheriting from Node
. This will differ in exact form depending on where you called getRootNode()
; for example:
- Calling it on an element inside a standard web page will return an
HTMLDocument
object representing the entire page. - Calling it on an element inside a shadow DOM will return the associated
ShadowRoot
.
Examples
The first simple example returns a reference to the HTML/document node:
rootNode = node.getRootNode();
This more complex example shows the difference between returning a normal root, and a root incuding the shadow root. (See the full source code):
<!-- source: https://github.com/jserz/js_piece/blob/master/DOM/Node/getRootNode()/demo/getRootNode.html --> <div class="js-parent"> <div class="js-child"></div> </div> <div class="js-shadowHost"></div> <script> // works on Chrome 54+οΌOpera 41+ var parent = document.querySelector('.js-parent'), child = document.querySelector('.js-child'), shadowHost = document.querySelector('.js-shadowHost'); console.log(parent.getRootNode().nodeName); // #document console.log(child.getRootNode().nodeName); // #document // create a ShadowRoot var shadowRoot = shadowHost.attachShadow({mode:'open'}); shadowRoot.innerHTML = '<style>div{background:#2bb8aa;}</style>' + '<div class="js-shadowChild">content</div>'; var shadowChild = shadowRoot.querySelector('.js-shadowChild'); // The default value of composed is false console.log(shadowChild.getRootNode() === shadowRoot); // true console.log(shadowChild.getRootNode({composed:false}) === shadowRoot); // true console.log(shadowChild.getRootNode({composed:true}).nodeName); // #document </script>
Specifications
Specification | Status | Comment |
---|---|---|
DOM The definition of 'getRootNode()' in that specification. |
Living Standard | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
getRootNode | Chrome Full support 54 | Edge Full support 79 | Firefox Full support 53 | IE No support No | Opera Full support 41 | Safari Full support 10.1 | WebView Android Full support 54 | Chrome Android Full support 54 | Firefox Android Full support 53 | Opera Android Full support 41 | Safari iOS Full support 10.3 | Samsung Internet Android Full support 6.0 |
Legend
- Full support
- Full support
- No support
- No support