Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to find the number of anchors with JavaScript?
In this tutorial, we will learn how to count the number of anchor elements (<a> tags) in an HTML document using JavaScript. The document.anchors property provides a way to access all anchors with a name attribute in the document.
Note: The document.anchors property is deprecated and only counts anchors with a name attribute. For modern development, use document.querySelectorAll('a') instead.
Using document.anchors (Deprecated)
The document.anchors property returns an HTMLCollection containing all anchor elements that have a name attribute. You can use the length property to get the count.
Syntax
let anchors = document.anchors; let numberOfAnchors = anchors.length;
Example 1: Counting Named Anchors
<html>
<body>
<h3>Find the number of anchors</h3>
<a href="/php" name="PHP">PHP</a><br>
<a href="/java/" name="Java">Java</a><br>
<a href="/html5/" name="HTML5">HTML5</a><br>
<a href="/css/" name="CSS">CSS</a><br>
<a href="/javascript/" name="JavaScript">JavaScript</a><br>
<a href="/python" name="Python">Python</a><br>
<p id="result"></p>
<script>
let anchors = document.anchors;
let noOfAnchors = anchors.length;
document.getElementById("result").innerHTML = "Named anchors: <b>" + noOfAnchors + "</b>";
</script>
</body>
</html>
Named anchors: 6
Modern Approach: Using querySelectorAll()
For modern web development, use document.querySelectorAll('a') to count all anchor elements, regardless of whether they have a name attribute.
Example 2: Counting All Anchors
<html>
<body>
<h3>Count all anchor elements</h3>
<a href="/php">PHP</a><br>
<a href="/java/" name="Java">Java (with name)</a><br>
<a href="/html5/">HTML5</a><br>
<a href="/css/" name="CSS">CSS (with name)</a><br>
<p id="modernResult"></p>
<script>
// Modern approach - counts ALL anchor elements
let allAnchors = document.querySelectorAll('a');
let totalAnchors = allAnchors.length;
// Deprecated approach - only counts anchors with name attribute
let namedAnchors = document.anchors.length;
document.getElementById("modernResult").innerHTML =
"Total anchors: <b>" + totalAnchors + "</b><br>" +
"Named anchors: <b>" + namedAnchors + "</b>";
</script>
</body>
</html>
Total anchors: 4 Named anchors: 2
Comparison of Methods
| Method | Counts | Status | Recommended |
|---|---|---|---|
document.anchors.length |
Only anchors with name attribute | Deprecated | No |
document.querySelectorAll('a').length |
All anchor elements | Modern standard | Yes |
document.getElementsByTagName('a').length |
All anchor elements | Traditional but valid | Alternative |
Example 3: Anchors Inside Buttons
<html>
<body>
<h3>Anchors inside buttons</h3>
<button>
<a href="/php" name="PHP">PHP</a>
</button>
<button>
<a href="/java/" name="Java">Java</a>
</button>
<button>
<a href="/css/" name="CSS">CSS</a>
</button>
<p id="buttonResult"></p>
<script>
let anchorsInButtons = document.querySelectorAll('button a').length;
let totalAnchors = document.querySelectorAll('a').length;
document.getElementById("buttonResult").innerHTML =
"Anchors in buttons: <b>" + anchorsInButtons + "</b><br>" +
"Total anchors: <b>" + totalAnchors + "</b>";
</script>
</body>
</html>
Anchors in buttons: 3 Total anchors: 3
Conclusion
While document.anchors can count named anchors, it's deprecated. Use document.querySelectorAll('a').length for modern development to count all anchor elements in your document.
327 Views
