Document: anchors property
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
The anchors
read-only property of the
Document
interface returns a list of all of the anchors in the document.
Value
An HTMLCollection
.
Examples
if (document.anchors.length >= 5) {
console.log("found too many anchors");
}
The following is an example that auto populates a Table of Contents with every anchor on the page:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Test</title>
<script>
function init() {
const toc = document.getElementById("toc");
for (const anchor of document.anchors) {
const li = document.createElement("li");
const newAnchor = document.createElement("a");
newAnchor.href = "#" + anchor.name;
newAnchor.textContent = anchor.text;
li.appendChild(newAnchor);
toc.appendChild(li);
}
}
</script>
</head>
<body onload="init()">
<h1>Title</h1>
<h2><a name="contents">Contents</a></h2>
<ul id="toc"></ul>
<h2><a name="plants">Plants</a></h2>
<ol>
<li>Apples</li>
<li>Oranges</li>
<li>Pears</li>
</ol>
<h2><a name="veggies">Veggies</a></h2>
<ol>
<li>Carrots</li>
<li>Celery</li>
<li>Beats</li>
</ol>
</body>
</html>
Notes
For reasons of backwards compatibility, the returned set of anchors only contains those
anchors created with the name
attribute, not those created with the
id
attribute.
Specifications
Specification |
---|
HTML Standard # dom-document-anchors |
Browser compatibility
BCD tables only load in the browser