document.documentElement

  • Revision slug: Web/API/document.documentElement
  • Revision title: document.documentElement
  • Revision id: 476947
  • Created:
  • Creator: kscarfone
  • Is current revision? No
  • Comment Updated tags

Revision Content

{{DomRef}}

Summary

Read-only

Returns the Element that is the root element of the document (for example, the <html> element for HTML documents).

Syntax

varelement = document.documentElement;

Example

var rootElement = document.documentElement;
var firstTier = rootElement.childNodes;

// firstTier is the NodeList of the direct children of the root element
for (var i = 0; i < firstTier.length; i++) {
   // do something with each direct kid of the root element
   // as firstTier[i]
}

Notes

This property is a read-only convenience for getting the root element associated with any document.

HTML documents typically contain a single child node, <html>, perhaps with a DOCTYPE declaration before it. XML documents often contain multiple child nodes: the root element, the DOCTYPE declaration, and processing instructions.

That's why you should use document.documentElement rather than {{Domxref("document.firstChild")}} to get the root element.

Specification

Revision Source

<div>
  {{DomRef}}</div>
<h2 id="Summary" name="Summary">Summary</h2>
<p><b>Read-only</b></p>
<p>Returns the <a href="/en-US/docs/DOM/element"><code>Element</code></a> that is the root element of the <a href="/en-US/docs/DOM/document"><code>document</code></a> (for example, the <code>&lt;html&gt;</code> element for HTML documents).</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">
var<i>element</i> = document.documentElement;
</pre>
<h2 id="Example" name="Example">Example</h2>
<pre class="brush:js">
var rootElement = document.documentElement;
var firstTier = rootElement.childNodes;

// firstTier is the NodeList of the direct children of the root element
for (var i = 0; i &lt; firstTier.length; i++) {
   // do something with each direct kid of the root element
   // as firstTier[i]
}</pre>
<h2 id="Notes" name="Notes">Notes</h2>
<p>This property is a read-only convenience for getting the root element associated with any document.</p>
<p>HTML documents typically contain a single child node, <code>&lt;html&gt;</code>, perhaps with a DOCTYPE declaration before it. XML documents often contain multiple child nodes: the root element, the DOCTYPE declaration, and <a href="/en-US/docs/DOM/ProcessingInstruction"> processing instructions</a>.</p>
<p>That's why you should use <code>document.documentElement</code> rather than {{Domxref("document.firstChild")}} to get the root element.</p>
<h2 id="Specification" name="Specification">Specification</h2>
<ul>
  <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-87CD092">DOM Level 2 Core: Document.documentElement</a></li>
</ul>
Revert to this revision