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 links in a document in JavaScript?
The document.links property in JavaScript provides access to all links in a document. It returns a collection of <a> and <area> elements that contain an href attribute.
Syntax
To get the total number of links in a document, use:
document.links.length
The document.links property returns an HTMLCollection that behaves like an array, allowing you to access individual links by index and get the total count using the length property.
Example 1: Basic Link Count
Here's a simple example to count the links in a document:
<html>
<body>
<a href="https://www.tutorialspoint.com/javascript/index.htm">JavaScript</a><br>
<a href="https://www.tutorialspoint.com/php/index.htm">PHP</a><br>
<a href="https://www.tutorialspoint.com/java8/index.htm">Java</a><br>
<p id="result"></p>
<script>
document.getElementById("result").innerHTML = "Number of links: " + document.links.length;
</script>
</body>
</html>
Example 2: Links with Attributes
This example demonstrates counting links that have various attributes:
<!DOCTYPE html>
<html>
<head>
<title>Finding Links in Document</title>
</head>
<body>
<h2>Website Links</h2>
<a name="google" href="https://www.google.com/" title="Google Home Page">Google</a><br>
<a name="facebook" href="https://www.facebook.com/" title="Facebook Home Page">Facebook</a><br>
<a name="youtube" href="https://www.youtube.com/" title="YouTube Home Page">YouTube</a><br>
<p id="linkCount"></p>
<script>
document.getElementById("linkCount").innerHTML = "Total links found: " + document.links.length;
</script>
</body>
</html>
Example 3: Displaying All Links with Details
This example shows how to iterate through all links and display their information:
<!DOCTYPE html>
<html>
<head>
<title>Link Analysis</title>
</head>
<body>
<h2>Document Links Analysis</h2>
<a href="https://www.tutorialspoint.com/">TutorialsPoint</a><br>
<a href="https://www.github.com/">GitHub</a><br>
<a href="https://www.stackoverflow.com/">Stack Overflow</a><br>
<div id="linkDetails"></div>
<script>
let result = "<h3>Link Details:</h3>";
for(let i = 0; i < document.links.length; i++){
result += "Link " + (i + 1) + ": " + document.links[i].href + "<br>";
}
result += "<br><strong>Total links: " + document.links.length + "</strong>";
document.getElementById("linkDetails").innerHTML = result;
</script>
</body>
</html>
Key Points
- Only
<a>and<area>elements withhrefattributes are counted - Links without
hrefattributes are not included in the collection - The collection is live - it updates automatically when links are added or removed
- You can access individual link properties like
href,title, andname
Browser Compatibility
The document.links property is supported in all modern browsers and has been part of the DOM specification since the early days of JavaScript.
Conclusion
The document.links.length property provides a simple way to count all links in a document. This method is reliable and works across all browsers for counting <a> and <area> elements with href attributes.
1K+ Views
