MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

The getRootNode() property 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: A Boolean that indicates whether the shadow root should be returned (false, the default), or a root node beyond shadow root (true).

Returns

A Node interface.

Example

The first simple example will return a reference to the HTML/document node when run in supporting browsers:

rootNode = node.rootNode;

This more complex example shows the difference between returning a normal root, and a root incuding the shadow root:

<!-- 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>
    // work on Chrome 54+,Opera41+

    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

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 54.0 53 (53) ? 41 10.1
Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support No support 54.0 53.0 (53) ? 41 10.1 54.0

Document Tags and Contributors

 Contributors to this page: bede, mkutny, chrisdavidmills, jszhou, jpmedley
 Last updated by: bede,