JavaScript Document links Property

What You’ll Learn

Document.links is a read-only instance property that returns a live HTMLCollection of every <a> and <area> element with an href attribute. Learn MDN’s loop example, how it differs from document.anchors, live collection behavior, and five examples with try-it labs.

Introduction

Want every hyperlink on a page without writing a selector? document.links gives you a ready-made collection of all <a href="..."> and <area href="..."> elements.

MDN: the read-only property returns a collection of all <a> and <area> elements in a document with a value for the href attribute.

Related Document tutorials: anchors, linkColor, forms, Document constructor.

Understanding Document.links

A read-only instance property on Document. Its value is a live HTMLCollection of hyperlink elements.

• Value — live HTMLCollection of a[href] and area[href] (MDN).
• Each item — typically HTMLAnchorElement or HTMLAreaElement with an href property.
• Access — document.links[0] or document.links.item(0).
• Length — document.links.length counts hyperlinks on the page.
• Iterate — for (const link of document.links) works in modern browsers (MDN example).

📝 Syntax

document.links

Value

An HTMLCollection — a live list of every <a> and <area> element that has an href attribute (MDN).

MDN example

for (const link of document.links) {
  const linkHref = document.createTextNode(link.href);
  const lineBreak = document.createElement("br");
  document.body.appendChild(linkHref);
  document.body.appendChild(lineBreak);
}

This loop reads each link’s resolved href URL and appends it to the page. In tutorials we usually log to the console instead.

⚖️ Document Collection Properties

Examples Gallery

Examples follow MDN Document: links. Open try-it labs to count, loop, and inspect hyperlinks on sample pages.

console.log(document.links.length);
console.log("Has links?", document.links.length > 0);

3
Has links? true

for (const link of document.links) {
  console.log(link.href);
}

https://example.com/
https://example.com/about
#section

const first = document.links[0];
console.log(first?.href);
console.log(first === document.links.item(0)); // true

https://example.com/home
true

// HTML: 
for (const link of document.links) {
  console.log(link.tagName, link.href);
}
// Logs AREA and A entries

A https://example.com/docs
AREA https://example.com/north

const before = document.links.length;
const a = document.createElement("a");
a.href = "#dynamic";
a.textContent = "New link";
document.body.appendChild(a);
console.log(before, "→", document.links.length);

2 → 3

🚀 Common Use Cases

• Link audits — count external vs internal URLs in a page script.
• SEO checks — loop links and inspect href, rel, or target.
• Accessibility reviews — verify link text and focus styles across all anchors.
• Quick diagnostics — log every hyperlink during debugging.
• Learning DOM collections — compare with document.images and document.forms.
• Image map tooling — include clickable <area> regions in link inventories.

📝 Notes

• MDN: Baseline Widely available (since June 2018) — no Deprecated / Experimental / Non-standard banner.
• Requires href — <a> without href is not a hyperlink and is excluded.
• Includes <area href> in image maps, not just <a> (MDN).
• link.href is typically an absolute URL in the browser.
• Related: anchors, images, linkColor, Document constructor.

💡 Best Practices