JavaScript Document anchors Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word ANCHORS

Definition

Document.anchors is a read-only property that returns an HTMLCollection of every <a name="…"> in the document (MDN).

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use document.anchors. Start with this line.

JavaScript
document.anchors
CallWhat it does
document.anchorsPrimary signature.

Built into the browser. Read or assign document.anchors — no import required.

Library declarations
JavaScript
document.anchors

Parameters

ParameterDescription
<a name="…">Required. What enters the collection

Return Value

Return ValueDescription
*Live HTMLCollection

JavaScript Examples

Example 1 — Count Named Anchors

MDN’s basic check — read document.anchors.length.

JavaScript
if (document.anchors.length >= 5) {
  console.log("found too many anchors");
} else {
  console.log("anchor count: " + document.anchors.length);
}
Try It Yourself

How It Works

  1. Read the collection. document.anchors is an HTMLCollection.
  2. Use .length. It counts only <a name> elements.
  3. Branch on the count. MDN’s sample warns when there are “too many”.
  4. Remember status. Fine for learning old APIs — avoid in new apps.

Example 2 — Loop Anchor Names

List each named anchor’s .name (TOC-building idea from MDN).

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

How It Works

  1. Iterate the collection. for…of walks each named <a>.
  2. Read .name. That is the legacy fragment identifier.
  3. Collect strings. Join them for a simple list (TOC demos use .text too).
  4. Live list. Adding/removing <a name> updates the collection.

Example 3 — Prefer querySelectorAll("a[name]")

Modern replacement for the same named-anchor set.

JavaScript
const named = document.querySelectorAll("a[name]");
console.log(named.length);

named.forEach(function (el) {
  console.log(el.getAttribute("name"));
});
Try It Yourself

How It Works

  1. Query by attribute. a[name] matches the same legacy targets.
  2. Get a NodeList. Standard DOM API — not the deprecated property.
  3. Read the name. getAttribute("name") (or .name on anchors).
  4. Better long-term. For new navigation, prefer id + href="#id".
Compatibility

Browser Support

Document.anchors is Deprecated (MDN). Engines may still expose it for legacy pages, but new code should not depend on it.

✓ Deprecated · Legacy

Document.anchors

Legacy HTMLCollection of named anchors — prefer querySelectorAll("a[name]") or id fragments.

Legacy Avoid in new apps
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
anchors Deprecated

Bottom line: Still present in many browsers for old content. For production features, use querySelectorAll("a[name]") or modern id-based in-page links.

Frequently Asked Questions

A read-only HTMLCollection of every anchor element in the document that has a name attribute — legacy in-page targets such as <a name="section">.
Yes. MDN marks Document.anchors as Deprecated. Prefer document.querySelectorAll("a[name]") when you need named anchors, or modern id-based fragment links (#id).
No. For backwards compatibility, the collection only includes anchors created with the name attribute, not those created with id alone.
document.anchors lists named anchors (<a name="...">). document.links lists hyperlinks (<a href="...">). An <a> can appear in both if it has name and href.
Yes. Use for...of, a classic indexed for loop, or Array.from. The collection is live — it updates when matching anchors are added or removed.
No. Prefer querySelectorAll("a[name]") for named anchors, or put id on headings and link with href="#id".

Next: applets

Learn another legacy Document collection (also deprecated).

applets tutorial →

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)

11 people found this page helpful

JavaScript Document all Property JavaScript Document applets Property