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.
if (document.anchors.length >= 5) {
dump("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>
View on JSFiddle
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.