Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.tutorialpoints.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 apply 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 3 hyperlinks in the HTML document we will use the document.links button 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>
It prints the number of links in the document.
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 log 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>
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 log 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.nameItem("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 += links.namedItem("mylink").href + "<br>"; for(var i = 0 ; i < links.length ; i++){ if(links.item(i).id == "mylink") continue; <br><br> text += links.item(i).href + "<br>"; } resultDiv.innerHTML = text; } </script> </body> </html>
The "find links !" button triggers the findLinks() JavaScript function. Since we don’t want to log duplicate hyperlinks, the link with the id attribute equal to “mylink” needs to be skipped. The id attribute of the link is used for that comparison.
Conclusion
The links property of the document object is very helpful to manipulate the hyperlinks present in the HTML document. Various id tagged hyperlinks can be used as a standard across the web app providing convenience.
514 Views
