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 show the number of links in a document with JavaScript?
We use the links property of the document object to show the number of links in a document with JavaScript. The document object, part of the DOM, corresponds to the current web page that the browser has loaded. It contains all the information about the condition of the browser as well as the web page.
The links is a property of the document object that returns a list of all the hyperlinks present in the HTML document. A hyperlink may look something like this:
"https://www.tutorialspoint.com/php"
The links property of the document object lists all HTML elements having href attribute and tags <area>, <a>.
The anchor tag, <a> is used to define hyperlinks in HTML. It contains the href attribute which can contain hyperlinks to other pages, files, etc.
Here are some examples:
<a href="https://www.tutorialspoint.com/php">PHP</a> <a href="https://www.tutorialspoint.com/html5">HTML</a>
The <area> tag is used to create clickable areas inside an image. It contains various attributes such as shape, coords, href, alt, etc. to locate the clickable area on the image. It is always used inside a map tag.
Here is an example:
<area shape="rect" coords="184,6,253,27" href="https://mozilla.org" target="_blank" alt="Mozilla" />
Using the Document links Property
It is a property of the document object. It contains the list of links in the document and their associated attributes. We can get the total number of links in a document using the length property.
To get the total number of links in a document, we can follow the below syntax.
Syntax
var val = document.links.length;
Here the val is total number of links in the document.
Let's look at an example to understand better.
Example 1
In the code snippet below, we have 4 hyperlinks in the HTML document. We will use the document.links property to show the number of links in a document.
<!DOCTYPE html>
<html>
<body>
<a href="https://www.tutorialspoint.com/php">PHP</a>
<br>
<a href="https://www.tutorialspoint.com/java/">Java</a>
<br>
<a href="https://www.tutorialspoint.com/html5/">HTML</a>
<br>
<a href="https://www.tutorialspoint.com/css/">CSS</a>
<script>
var val = document.links.length;
document.write("<br>Number of links in the document: " + val);
</script>
</body>
</html>
PHP Java HTML CSS Number of links in the document: 4
The returned list of links can be iterated and its attributes can be accessed as well. The random access operator [ ] can be used to access any link and its respective attribute like href can be chained with the dot ( . ) operator.
Syntax
var ithURL = document.links[i].href
This accesses the ith link in the HTML document and saves it in the ithURL variable.
Example 2
In the below code snippet, we will create a button that first extracts the list of all links present in the HTML document and then iterates on that list to display every hyperlink in the HTML body.
<!DOCTYPE html>
<html>
<body>
<a href="https://www.tutorialspoint.com/php">PHP</a>
<br>
<a href="https://www.tutorialspoint.com/java/">Java</a>
<br>
<a href="https://www.tutorialspoint.com/html5/">HTML</a>
<br>
<a href="https://www.tutorialspoint.com/css/">CSS</a>
<br><br>
<button onclick="findLinks()">Find Links!</button>
<div id="result"></div>
<script>
var links = document.links;
var text = "";
var resultDiv = document.getElementById("result");
function findLinks(){
text += "<br>The number of links in the document is: " + links.length;
text += "<br>These are the " + links.length + " links in the document: <br><br>";
for(var i = 0; i < links.length; i++){
text += links[i].href + "<br>";
}
resultDiv.innerHTML = text;
}
</script>
</body>
</html>
PHP Java HTML CSS Find Links! (button) The number of links in the document is: 4 These are the 4 links in the document: https://www.tutorialspoint.com/php https://www.tutorialspoint.com/java/ https://www.tutorialspoint.com/html5/ https://www.tutorialspoint.com/css/
The Find Links! button triggers the findLinks() function. Inside the function, we use a for loop to iterate over the list and use the href property to display the URLs on the screen.
Using Document links item Property
Another alternative is to use the item property of document.links.
var ithURL = document.links.item(i).href
It extracts the ith hyperlink present in the document and saves it in ithURL variable.
JavaScript also has the utility to extract hyperlinks from the HTML document based on their id.
var myURL = document.links.namedItem("YOUR_ID").href
Let's understand both these properties better with an example:
Example 3
In the code snippet below, we have added a new hyperlink to the document and also provided an id to it. We then use this id to extract the concerned hyperlink.
<!DOCTYPE html>
<html>
<body>
<a id="mylink" href="https://www.tutorialspoint.com">Link to my site</a>
<br><br>
Link to courses:
<a href="https://www.tutorialspoint.com/php">PHP</a>
<br>
<a href="https://www.tutorialspoint.com/java/">Java</a>
<br>
<a href="https://www.tutorialspoint.com/html5/">HTML</a>
<br>
<a href="https://www.tutorialspoint.com/css/">CSS</a>
<br><br>
<button onclick="findLinks()">Find Links!</button>
<div id="result"></div>
<script>
var links = document.links;
var text = "";
var resultDiv = document.getElementById("result");
function findLinks(){
text += "<br>The number of links in the document is: " + links.length;
text += "<br>These are the links in the document: <br><br>";
text += "Link by ID: " + links.namedItem("mylink").href + "<br>";
for(var i = 0; i < links.length; i++){
text += "Link " + (i + 1) + ": " + links.item(i).href + "<br>";
}
resultDiv.innerHTML = text;
}
</script>
</body>
</html>
Link to my site Link to courses: PHP Java HTML CSS Find Links! (button) The number of links in the document is: 5 These are the links in the document: Link by ID: https://www.tutorialspoint.com Link 1: https://www.tutorialspoint.com Link 2: https://www.tutorialspoint.com/php Link 3: https://www.tutorialspoint.com/java/ Link 4: https://www.tutorialspoint.com/html5/ Link 5: https://www.tutorialspoint.com/css/
The "Find Links!" button triggers the findLinks() JavaScript function. We first use namedItem() to access the link by its ID, then use item() method to iterate through all links with their positions.
Conclusion
The links property of the document object provides a convenient way to access and count hyperlinks in HTML documents. Use document.links.length for counting links and array notation or item() method for accessing individual links.
870 Views
