The DOM links collection is used to return the collection of all <a> and <area> elements with the "href" attribute in the HTML document. The elements in the collection are sorted as they appear in the sourcecode.
Syntax
document.linksProperties: It contains a single property length which is used to return the number of <a> and <area> elements in the collection.
Methods
- [index]: It is used to return the <a> and <area> element of the specified index. The index value starts with 0. The NULL value is returned if the index value is out of range.
- item(index): It is used to return the <a> and <area> element of selected index. The index value starts with 0. The NULL value is returned if the index value is out of range. This method performs similarly to the above method.
- namedItem(id): It is used to return the <a> and <area> element from the collection which matches the specified id. NULL is returned if the id does not exist.
Return Value: An HTMLCollection Object, representing all <a> elements and/or <area> elements in the document. The elements in the collection are sorted as they appear in the source code
Example 1: Using the length property to count the number of link elements in the collection.Â
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>DOM document.links Property</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>Articles:</h2>
<ul>
<li>
<a id="js"
href="https://www.geeksforgeeks.org/javascript-tutorial/">
JavaScript Tutorial
</a>
</li>
<li>
<a id="python"
href="https://www.geeksforgeeks.org/python/python-programming-language-tutorial/">
Python Programming Language
</a>
</li>
<li>
<a id="cpp"
href="https://www.geeksforgeeks.org/c-plus-plus/">
C++ Programming Language
</a>
</li>
<li>
<a id="html"
href="https://www.geeksforgeeks.org/html/html-tutorial/">
HTML Tutorial
</a>
</li>
</ul>
<!--Driver Code Ends-->
<button onclick="countLinks()">
Count Links
</button>
<script>
function countLinks() {
let collection = document.links.length;
document.querySelector(".count").innerHTML = collection;
}
</script>
<!--Driver Code Starts-->
<br><br>
<span>Total links: </span>
<span class="count"></span>
</body>
</html>
<!--Driver Code Ends-->
Example 2: HTML code to find all links in the document and return their IDs.Â
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>DOM document.links Property</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>Articles:</h2>
<ul>
<li>
<a id="js"
href="https://www.geeksforgeeks.org/javascript-tutorial/">
JavaScript Tutorial
</a>
</li>
<li>
<a id="python"
href="https://www.geeksforgeeks.org/python/python-programming-language-tutorial/">
Python Programming Language
</a>
</li>
<li>
<a id="cpp"
href="https://www.geeksforgeeks.org/c-plus-plus/">
C++ Programming Language
</a>
</li>
<li>
<a id="html"
href="https://www.geeksforgeeks.org/html/html-tutorial/">
HTML Tutorial
</a>
</li>
</ul>
<!--Driver Code Ends-->
<button onclick="findLinkIDs()">
Find Link IDs
</button>
<script>
function findLinkIDs() {
let output = "";
let collection = document.links;
for (let i = 0; i < collection.length; i++) {
output += `<li>${collection[i].id}</li>`;
}
document.querySelector(".ids").innerHTML = output;
}
</script>
<!--Driver Code Starts-->
<p>The IDs of all the links are:</p>
<ul class="ids"></ul>
</body>
</html>
<!--Driver Code Ends-->
Example 3: Using the id property to find by link ID and display its href attributeÂ
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>DOM document.links Property</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>Articles:</h2>
<ul>
<li>
<a id="js"
href="https://www.geeksforgeeks.org/javascript-tutorial/">
JavaScript Tutorial
</a>
</li>
<li>
<a id="python"
href="https://www.geeksforgeeks.org/python/python-programming-language-tutorial/">
Python Programming Language
</a>
</li>
<li>
<a id="cpp"
href="https://www.geeksforgeeks.org/c-plus-plus/">
C++ Programming Language
</a>
</li>
<li>
<a id="html"
href="https://www.geeksforgeeks.org/html/html-tutorial/">
HTML Tutorial
</a>
<!--Driver Code Ends-->
</li>
</ul>
<button onclick="returnAllLinks()">
Show All Link URLs
</button>
<script>
function returnAllLinks() {
let collection = document.links;
let output = "";
for (let i = 0; i < collection.length; i++) {
output += `<p> The href attribute of the link with ID
${collection[i].id} is:
<br>
${collection[i].href}
</p>
`;
}
document.querySelector(".name").innerHTML = output;
}
</script>
<!--Driver Code Starts-->
<div class="name"></div>
</body>
</html>
<!--Driver Code Ends-->
- Unlike document.anchors (which only looked at named anchors), document.links returns every element and every element that has an href attribute. Elements without an href are excluded.
- The collection is live it automatically updates if qualifying links are added or removed from the document. Elements appear in document order.
