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 work with document.links in JavaScript?
In JavaScript, the document.links property provides access to all anchor (<a>) and area (<area>) elements that have an href attribute. This DOM property returns a live HTMLCollection of clickable links in the document.
Syntax
let links = document.links;
Properties
The document.links collection provides one main property:
length ? Returns the number of links in the collection.
Working with document.links Properties
The example below demonstrates how to access link properties. Note that only elements with href attributes are included in the collection.
<html>
<body>
<h2>Working with document.links Properties</h2>
<!-- This anchor has no href, so it won't be in document.links -->
<a name="docAncLink1">Anchor Link1</a> <br><br>
<!-- This anchor has href, so it will be included -->
<a href="https://tutorialspoint.com">Anchor Link2</a> <br><br>
<!-- This area has href, so it will be included -->
<area name="docAreaLink1" href="https://docAreaLink1.com">Area Link1</area> <br><br>
<!-- This area has no href, so it won't be in document.links -->
<area id="docAreaLink2">Area Link2</area> <br><br>
<button onclick="displayLinkProperties()">Display Link Properties</button>
<p id="output"></p>
<script>
function displayLinkProperties() {
let docLinks = document.links;
let output = "";
try {
output += "<b>Total valid links: </b>" + docLinks.length + "<br><br>";
if (docLinks.length > 0) {
output += "<b>First link innerHTML: </b>" + docLinks[0].innerHTML + "<br>";
output += "<b>First link href: </b>" + docLinks[0].href + "<br>";
output += "<b>First link text: </b>" + docLinks[0].innerText + "<br><br>";
}
if (docLinks.length > 1) {
output += "<b>Second link href: </b>" + docLinks[1].href + "<br>";
}
} catch (e) {
output += "Error: " + e.message;
}
document.getElementById("output").innerHTML = output;
}
</script>
</body>
</html>
Methods for Accessing Links
The document.links collection supports several methods for accessing specific elements:
[index] ? Returns the element at the specified index (starting from 0). Returns
undefinedif index is out of range.item(index) ? Returns the element at the specified index. Returns
nullif index is out of range.namedItem(name) ? Returns the element with the specified
nameoridattribute. Returnsnullif not found.
Example: Using Methods
<html>
<body>
<h2>Working with document.links Methods</h2>
<a name="linkAnchorMeth" href="https://tutorialspoint.com">Anchor Link</a> <br><br>
<area name="linkAreaMeth" href="https://example.com">Area Link</area> <br><br>
<button onclick="demonstrateMethods()">Demonstrate Methods</button>
<p id="methodOutput"></p>
<script>
function demonstrateMethods() {
let links = document.links;
let output = "";
try {
// Using bracket notation [index]
output += "<b>Anchor link text using [0]: </b>" + links[0].text + "<br>";
// Using namedItem() method
output += "<b>Anchor link href using namedItem(): </b>" +
links.namedItem("linkAnchorMeth").href + "<br>";
// Using item() method
output += "<b>Anchor link name using item(): </b>" +
links.item(0).name + "<br><br>";
// Accessing second link
output += "<b>Area link href using [1]: </b>" + links[1].href + "<br>";
output += "<b>Area link href using namedItem(): </b>" +
links.namedItem("linkAreaMeth").href + "<br>";
output += "<b>Area link href using item(): </b>" + links.item(1).href + "<br>";
} catch (e) {
output += "Error: " + e.message;
}
document.getElementById("methodOutput").innerHTML = output;
}
</script>
</body>
</html>
Key Points
Only
<a>and<area>elements withhrefattributes are included indocument.linksThe collection is live, meaning it updates automatically when links are added or removed
Index-based access starts from 0
Use
namedItem()to find elements by theirnameoridattributes
Common Use Cases
The document.links property is commonly used for:
Link validation and checking
Adding event listeners to all links
Extracting link information for analytics
Modifying link behavior dynamically
Conclusion
The document.links property provides a convenient way to access all clickable links in a document. Use its properties and methods to iterate through, validate, or manipulate links programmatically.
1K+ Views
