JavaScript Document anchors Property

What You’ll Learn

Document.anchors is a read-only deprecated instance property that returns an HTMLCollection of anchor elements with a name attribute. Learn how legacy pages used it for table-of-contents scripts, why id-only links are excluded, and how querySelectorAll replaces it—with five examples and try-it labs.

Introduction

Before modern CSS and single-page apps, developers marked sections with <a name="chapter-1"></a> and linked to them with href="#chapter-1". To list every in-page target, old scripts read document.anchors.

MDN’s modern recommendation: use document.querySelectorAll("a[name]") if you truly need named anchors, or prefer id attributes on headings and elements with href="#section-id".

Related Document tutorials: all, alinkColor, Document constructor.

Understanding Document.anchors

A read-only instance property on Document. Its value is a live HTMLCollection of every <a> element that has a name attribute.

• Value — HTMLCollection of named anchor elements.
• Read-only — you do not assign a new collection to document.anchors.
• Live collection — reflects DOM changes when anchors are added or removed.
• Indexed access — document.anchors[i] or item(i).
• name only — <a id="x"> without name is excluded (MDN).

📝 Syntax

document.anchors

Value

An HTMLCollection of anchor elements with a name attribute.

MDN modern replacement

const namedAnchors = document.querySelectorAll("a[name]");

⚖️ document.anchors vs Related APIs

Examples Gallery

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

if (document.anchors.length >= 5) {
  console.log("found too many anchors");
} else {
  console.log("anchor count:", document.anchors.length);
}

anchor count: 3

const names = [];
for (const anchor of document.anchors) {
  names.push(anchor.name);
}
console.log(names.join(", "));

contents, plants, veggies

const toc = document.getElementById("toc");
for (const anchor of document.anchors) {
  const li = document.createElement("li");
  const link = document.createElement("a");
  link.href = "#" + anchor.name;
  link.textContent = anchor.textContent.trim() || anchor.name;
  li.appendChild(link);
  toc.appendChild(li);
}

<ul id="toc">
  <li><a href="#contents">Contents</a></li>
  <li><a href="#plants">Plants</a></li>
  <li><a href="#veggies">Veggies</a></li>
</ul>

// In HTML:
// <a name="legacy"></a>
// <a id="modern-only"></a>

console.log("anchors length:", document.anchors.length);
console.log("includes legacy:", !!document.querySelector('a[name="legacy"]'));
console.log("includes id-only:", !!document.querySelector('a#modern-only'));

anchors length: 1
includes legacy: true
includes id-only: true
(id-only anchor is NOT in document.anchors)

const modern = document.querySelectorAll("a[name]");
console.log("modern count:", modern.length);
console.log("legacy count:", document.anchors.length);
console.log("same length:", modern.length === document.anchors.length);

modern count: 3
legacy count: 3
same length: true

🚀 Common Use Cases

• Reading legacy intranet pages — recognize TOC scripts using document.anchors.
• Migrating old scripts — replace with querySelectorAll("a[name]") or id-based links.
• Teaching DOM history — contrast name anchors with modern fragment ids.
• Debugging — compare anchors.length vs visible in-page link targets.
• Not for new apps — use semantic headings with id attributes instead.
• Documentation sites — auto-generate nav from h2[id], not a[name].

📝 Notes

• document.anchors is deprecated (MDN) — avoid in new code.
• Read-only property; returns a live HTMLCollection, not a plain array.
• Only includes <a name="..."> — not id-only anchors (MDN).
• MDN replacement: document.querySelectorAll("a[name]").
• Do not confuse with document.links (elements with href).
• Related: all, ownerDocument, String.anchor().

💡 Best Practices