jQuery :root Selector

What Is :root?

:root selects the single element that is the root of the document. Official jQuery docs note that in HTML this is always the <html> element — the same node as document.documentElement.

$(":root")                    // document root (1 element)
$(":root")[0].nodeName        // "HTML" in HTML pages

$("html")                     // same node in HTML
document.documentElement      // same DOM node (no jQuery)

// Always exactly one match

How to Use :root

Select the root once, then read its tag name, set attributes, or start a traversal from the top of the tree.

1. Call $(":root") — you always get one element.
2. In HTML pages, treat it as the <html> element.
3. Read properties with [0].nodeName, .attr(), or .prop().
4. Use it as a starting point for .find() when you want searches from the true document top.
5. Prefer $("html") only when you specifically mean the HTML tag name.

Pseudocode

root = document.documentElement   // top of the tree

return jQuery(root)

// In HTML:
//   root.tagName === "HTML"
//   $(":root")[0] === $("html")[0]

Cheat Sheet

Keep these facts handy while working with the document root.

Live Preview

Compare :root with other ways to reach the top of this page’s document.

$(":root")
nodeName: HTML
length: 1
same as html? true

/* document root = <html> in HTML */

jQuery Examples

Short, copy-ready snippets. Open DevTools Console with jQuery loaded, or use Try It Yourself for a live editor.

$("#log").text($(":root")[0].nodeName);

HTML
(The root of this document is the html element)

var same = $(":root")[0] === $("html")[0];
console.log("same node?", same);
console.log("root length:", $(":root").length);
console.log("html length:", $("html").length);

same node? true
root length: 1
html length: 1

var root = $(":root")[0];
var native = document.documentElement;
var qsa = document.querySelector(":root");

console.log(root === native);
console.log(root === qsa);
console.log(native.nodeName);

true
true
HTML

var before = $(":root").attr("lang") || "(none)";
$(":root").attr("lang", "en");
var after = $(":root").attr("lang");

$("#out").text("before: " + before + "\\nafter: " + after);

before: en  (or whatever was set)
after: en

var n = $(":root").find("p").length;
$("#out").text("Paragraphs under :root: " + n);

Paragraphs under :root: 2
(Counts every <p> in the document)

Performance Notes

Because :root is standard CSS, jQuery can use the browser’s native selector engine. Cost is negligible — you are resolving a single, well-known node.

Key Takeaways