Node.rootNode

The Node.rootNode read-only property returns a Node object representing the topmost node in the tree, or the current node if it's the topmost node in the tree. This is found by walking backward along Node.parentNode until the top is reached.

Syntax

rootNode = node.rootNode;

Example

This example constructs a simple DOM tree of elements, then displays information about a specific node followed by the base URI of its root node.

HTML

<div id="outer">
  <div id="inner">
    <a id="button" href="go.html">
      Hello
    </a>
    <p><em id="me">It's me.</em></p>
    <p>I was wondering if after all these years, you still code in C...</p>
  </div>
</div>

<pre id="output">
</pre>

JavaScript

let output = document.getElementById("output");

let me = document.getElementById("me");
output.innerHTML += "Element with id 'me': " + me.outerHTML + "<br>";
output.innerHTML += "Root node's base URI: " + me.rootNode.baseURI;

p {
  margin: 0px;
}

#output {
  width: 640px;
  border: 2px solid black;
  border-radius: 5px;
  padding: 10px;
  margin-top: 20px;
  display: block;
  overflow: scroll;
}

Notes

Gecko-based browsers insert text nodes into a document to represent whitespace in the source markup. Therefore a node obtained, for example, using Node.firstChild or Node.previousSibling may refer to a whitespace text node rather than the actual element the author intended to get.

See Whitespace in the DOM and W3C DOM 3 FAQ: Why are some Text nodes empty? for more information.

Browser compatibility

[1] Not activated by default; it is behind the pref dom.node.rootNode.enabled and  you need to set it to true to activate it.

Specifications