JavaScript Document rootElement Property

Beginner
⏱️ 11 min read
📚 Updated: Jul 2026
🎯 5 Examples
🚀 5 Try-it labs
Deprecated
Instance property
JavaScript document.rootElement property tutorial — deprecated SVG root Element
Overview

What You’ll Learn

Document.rootElement is a deprecated instance property that returned the SVG document root. Learn why MDN recommends documentElement instead, HTML vs SVG behavior, migration patterns, and five examples with try-it labs.

01

Kind

Instance property

02

Returns

Element | null

03

Status

Deprecated

04

Use case

Legacy SVG

05

Prefer

documentElement

06

HTML

Usually null

Fundamentals

Introduction

Every document has a single root element — the top-level node in the tree. For HTML, that is usually <html>. For standalone SVG documents, it is often an <svg> element. document.documentElement is the standard way to reach it today.

MDN: Document.rootElement returns the root Element if the document is an SVG root context; otherwise null. The property is deprecated in favor of document.documentElement, which works for all document types.

💡
One replacement for all documents

Whether you work with HTML, XHTML, or SVG, use document.documentElement. It is Baseline Widely available and the property MDN recommends instead of rootElement.

Related Document tutorials: documentElement, firstElementChild, body, Document constructor.

Concept

Understanding Document.rootElement

A read-only instance property from the SVG document extensions. MDN marks it deprecated.

  • Value (SVG) — root Element, often SVGSVGElement (MDN).
  • Value (HTML) — typically null (MDN: otherwise null).
  • SVG match — identical to documentElement for non-empty SVG docs (MDN).
  • Replacement — document.documentElement (MDN).
  • Status — Deprecated (MDN).
Foundation

📝 Syntax

JavaScript
document.rootElement

Value

An Element (SVG root) or null (MDN).

Modern replacement

JavaScript
const root = document.documentElement;
console.log(root.tagName); // "HTML" on HTML pages
Cheat Sheet

⚡ Quick Reference

GoalCode / note
Get root (modern)document.documentElement
Legacy SVG onlydocument.rootElement (deprecated)
HTML rootElementUsually null (MDN)
Root tag namedocument.documentElement.tagName
Theme class on rootdocument.documentElement.classList
MDN statusDeprecated — use documentElement
Snapshot

🔍 At a Glance

Four facts about document.rootElement.

Type
Element|null

Read-only

Status
deprecated

Avoid

Prefer
documentElement

MDN

HTML
null

Typical

Compare

📋 rootElement vs documentElement

rootElementdocumentElement
MDN statusDeprecatedBaseline Widely available
HTML documentsnullHTMLElement (<html>)
SVG documentsSVG root (MDN)Same root (MDN)
Use in 2026?NoYes
Hands-On

Examples Gallery

Examples follow MDN Document: rootElement. Try-it labs run in HTML, so rootElement is usually null — that demonstrates why you should use documentElement.

📚 Getting Started

See deprecated behavior on an HTML page.

Example 1 — Read on an HTML Page

On HTML, rootElement is typically null (MDN).

JavaScript
console.log(document.rootElement);
// null on typical HTML pages
Try It Yourself

How It Works

This is why beginners should use document.documentElement instead.

Example 2 — Compare with documentElement

Show the difference on the same HTML document.

JavaScript
console.log({
  rootElement: document.rootElement,
  documentElement: document.documentElement.tagName
});
Try It Yourself

How It Works

MDN: for SVG, both can reference the same root; for HTML, only documentElement is useful.

📈 Migration & Safe Access

Patterns for legacy code and modern replacements.

Example 3 — Migrate to documentElement

Replace deprecated reads with the standard property.

JavaScript
// Before (deprecated)
// const root = document.rootElement;

// After (MDN recommended)
const root = document.documentElement;
console.log(root.lang);
Try It Yourself

How It Works

One line change fixes most legacy snippets that wrongly used rootElement on HTML.

Example 4 — Feature Detect Legacy Property

Check whether rootElement exists before reading (audits).

JavaScript
const hasRootElement = "rootElement" in document;
console.log("rootElement supported?", hasRootElement);
Try It Yourself

How It Works

Even when the property exists, prefer documentElement for actual root access.

Example 5 — Safe Root Helper (Modern)

Always return the document root via documentElement.

JavaScript
function getDocumentRoot() {
  return document.documentElement;
}

const root = getDocumentRoot();
console.log(root.tagName, root.nodeName);
Try It Yourself

How It Works

This pattern works for HTML, XHTML, and SVG without touching deprecated APIs.

Applications

🚀 Common Use Cases

  • Legacy SVG audits — find old code reading rootElement.
  • Migration — replace with document.documentElement.
  • Teaching — explain why two root properties existed.
  • Do not use for HTML themes — use documentElement.classList.
  • Code reviews — flag deprecated root access.
  • Interviews — know the MDN replacement by heart.

🧠 Why documentElement Replaced rootElement

1

SVG added rootElement

SVG document extensions exposed a root accessor for standalone SVG files.

Legacy
2

HTML standardized documentElement

One property covers HTML, XHTML, and SVG document roots.

Standard
3

MDN deprecates rootElement

New code should not rely on the SVG-only alias.

Deprecated
4

Use document.documentElement

Baseline, clear, and works on every document type you will build today.

Important

📝 Notes

  • MDN: Deprecated — Deprecated banner shown above; not Experimental or Non-standard on MDN.
  • On HTML pages, rootElement is usually null while documentElement is <html>.
  • For non-empty SVG documents, MDN says rootElement === documentElement.
  • Read-only; assigning does not change the document root.
  • Related: documentElement, firstElementChild, Document constructor.
Compatibility

Browser Support

Document.rootElement is marked Deprecated on MDN. Prefer document.documentElement (Baseline). Logos use the shared browser-image-sprite.png sprite from this project.

✓ Deprecated · Use documentElement

Document.rootElement

Legacy SVG root accessor — deprecated in favor of document.documentElement.

Legacy Avoid in new code
Google Chrome Legacy / may exist
Deprecated
Mozilla Firefox Legacy / limited
Deprecated
Apple Safari Legacy SVG contexts
Deprecated
Microsoft Edge Legacy alias
Deprecated
Opera Follow Chromium
Deprecated
Internet Explorer Legacy era
Legacy only
Document.rootElement Deprecated

Bottom line: Do not use rootElement in new projects. document.documentElement is Baseline and returns the root Element for HTML and SVG.

Wrap Up

Conclusion

Document.rootElement was a legacy SVG root accessor. MDN deprecates it in favor of document.documentElement, which returns the root Element for all modern documents. On HTML pages, rootElement is usually null anyway.

Continue with scripts, documentElement, ownerDocument, firstElementChild, or the JavaScript hub.

View Examples Gallery documentElement
Pro Tips

💡 Best Practices

✅ Do

  • Use document.documentElement for the root
  • Migrate legacy rootElement reads in audits
  • Set theme classes on documentElement
  • Read lang / dir from the root element
  • Link to the documentElement tutorial for details

❌ Don’t

  • Use rootElement in new HTML projects
  • Expect rootElement to return <html>
  • Assign to rootElement or documentElement
  • Confuse root with document.body
  • Assume SVG and HTML behave identically for rootElement
Summary

Key Takeaways

Knowledge Unlocked

Five things to remember about document.rootElement

Deprecated SVG alias — use documentElement instead.

5
Core concepts
🌳01

Returns

Element|null

API
⚠️02

Status

Deprecated

MDN
🚫03

HTML

null

Typical
✅04

Prefer

documentElement

MDN
🎨05

SVG

same root

Legacy
🎯You know to use document.documentElement instead of rootElement
Review Quick Reference →

❓ Frequently Asked Questions

For SVG documents, the Element that is the root of the document (often an SVGSVGElement). MDN: otherwise null. It is deprecated in favor of document.documentElement.
Yes. MDN marks Document.rootElement as Deprecated. Use document.documentElement instead, which returns the root element for all document types.
MDN describes rootElement for SVG root elements; on typical HTML documents it returns null. Use document.documentElement to get the <html> root.
MDN: for a non-empty SVG document, rootElement is an SVGSVGElement identical to documentElement.
Always use document.documentElement. It is the standard Baseline property for the document root Element.
No. It is read-only. Even where it still exists, new code should read document.documentElement instead.
Did you know?

MDN states that for a non-empty SVG document, document.rootElement is an SVGSVGElement identical to document.documentElement. That is why the standard property superseded the SVG-specific name.

Next: scripts

Learn how to list every <script> tag with document.scripts.

scripts →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

6 people found this page helpful

JavaScript Document referrer Property JavaScript Document scripts Property