JavaScript Document all Property

What You’ll Learn

Document.all is a read-only deprecated instance property that returns an HTMLAllCollection of every element in document order. Learn how legacy code used it, why typeof document.all === "undefined" is a famous quirk, and how querySelectorAll replaces it—with five examples and try-it labs.

Introduction

In very old web pages, developers sometimes grabbed every element with document.all instead of modern selectors. The property returns a collection you can index like an array or look up by legacy id / name strings.

MDN’s modern recommendation is straightforward: use document.querySelectorAll("*") when you truly need every element, or a more specific selector when you do not.

Related Document tutorials: alinkColor, activeElement, Document constructor.

Understanding Document.all

A read-only instance property on Document. Its value is an HTMLAllCollection rooted at the document node and containing every element in the page.

• Value — HTMLAllCollection (deprecated collection type).
• Read-only — you do not assign a new collection to document.all.
• Indexed access — document.all[i] like an array (legacy).
• Named access — document.all["myId"] or item("myId") (legacy).
• Special quirk — acts like undefined in typeof, boolean, and loose equality checks for IE-detection compatibility.

📝 Syntax

document.all

Value

An HTMLAllCollection containing every element in the document.

MDN modern replacement

const allElements = document.querySelectorAll("*");

⚖️ document.all vs Modern DOM Queries

Examples Gallery

Examples follow MDN Document: all and HTMLAllCollection. Use View Output or Try It Yourself for each case.

console.log(document.all.length);
console.log(document.all.constructor.name);
// "HTMLAllCollection" (where supported)

42
HTMLAllCollection

const modern = document.querySelectorAll("*");
console.log(modern.length);
console.log(modern[0].nodeName);
// Same document-order element list — standard API

42
HTML

const first = document.all[0];
console.log(first.nodeName);
console.log(document.all.item(0) === first);

HTML
true

// Legacy (deprecated):
const legacy = document.all.item("demo");

// Modern replacement:
const modern = document.getElementById("demo");

console.log(legacy === modern);

true
(use getElementById in new code)

console.log(typeof document.all);        // "undefined" (legacy quirk)
console.log(document.all == null);       // true (loose)
console.log(document.all === undefined); // false (strict)
console.log(Boolean(document.all));      // false (falsy in boolean context)

undefined
true
false
false

🚀 Common Use Cases

• Reading legacy intranet code — recognize document.all loops.
• Migrating old scripts — replace with querySelectorAll or targeted queries.
• Teaching DOM history — contrast collections vs modern selectors.
• Interview trivia — explain the typeof undefined quirk accurately.
• Not for new apps — never query the whole document via document.all.
• Debugging — compare all.length vs querySelectorAll("*").length when studying a legacy page.

📝 Notes

• document.all is deprecated (MDN) — avoid in new code.
• Read-only property; returns HTMLAllCollection, not a plain array.
• MDN replacement: document.querySelectorAll("*") for all elements.
• Special typeof / falsy behavior is documented on HTMLAllCollection for IE-detection legacy.
• Strict equality: document.all === undefined is false even when typeof is "undefined".
• Related: activeElement, ownerDocument, JavaScript hub.

💡 Best Practices