Document

Members of the Document interface, reached through the ambient document global: querying the tree, creating nodes, and reaching the document's structural elements. The factories are mutation-guarded and throw NoModificationAllowedError on a read-only document.

Querying

querySelector

querySelector(selector) → the first matching element, or null. An invalid selector throws SyntaxError.

Divergence: it scans the whole document even when called on an element (not the receiver's subtree).

const title = document.querySelector("main h1");

querySelectorAll

querySelectorAll(selector) → a static NodeList of every match. Invalid selector throws SyntaxError. Also a whole-document scan.

for (const li of document.querySelectorAll("ul#todo > li")) {
  li.classList.add("seen");
}

getElementById

getElementById(id) → the element with that id, or null. The match is a literal string comparison on the id attribute — no CSS parsing, so ., :, and [ match literally. Scoped to the receiver's subtree (a divergence from the browser, where it is always document-wide).

const cart = document.getElementById("cart");

getElementsByTagNameNS

getElementsByTagNameNS(namespace, localName) → a NodeList, scoped to the receiver's descendants (excluding the receiver). "*" matches any namespace or any local name.

const cells = row.getElementsByTagNameNS("*", "td");

Creating nodes

Factory methods returning detached nodes. All are mutation-guarded.

createElement

createElement(tag) → a detached element. tagName later reports the tag uppercased (no namespace).

const li = document.createElement("li");
li.textContent = "New item";

createElementNS

createElementNS(namespace, qualifiedName) → a detached namespaced element. qualifiedName is stored verbatim (case preserved); namespace is recorded as the element's namespace URI. Throws NamespaceError for a malformed qualified name (empty, more than one :, a leading/trailing :, or a prefix with an empty namespace). No xmlns: declaration is auto-emitted.

const g = document.createElementNS("http://www.w3.org/2000/svg", "g");

createTextNode

createTextNode(data) → a detached text node.

const t = document.createTextNode("Hello");

createComment

createComment(data) → a detached comment node.

const c = document.createComment("build: 2026-07-02");

createDocumentFragment

createDocumentFragment() → a detached fragment. Appending the fragment moves its children into the target (leaving the fragment empty).

const frag = document.createDocumentFragment();
for (const name of names) {
  const li = document.createElement("li");
  li.textContent = name;
  frag.appendChild(li);
}
list.appendChild(frag);   // moves every <li> in at once

Document structure

Accessors that reach the document's structural elements — each returns the element or null.

documentElement

The root element (<html>).

const lang = document.documentElement.getAttribute("lang");

head / body

The <head> and <body> elements.

document.body.classList.add("ready");