Web/API/Node/getRootNode

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

• A Boolean 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
DOMThe 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.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
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

Node.getRootNode() by Mozilla Contributors is licensed under CC-BY-SA 2.5.