HTML | DOM links Collection
The DOM links collection is used to return the collection of all <a> and <area> elements with “href” attribute in a HTML document. The elements in the collection are sorted as they appear in the sourcecode.
Syntax:
document.links
Properties: It contains single property length which is used to return the number of <a> and <area> elements in the collection.
Methods: The DOM links collection contains three methods which are listed below:
- [index]: It is used to return the <a> and <area> element of the specified index. The index value starts with 0. The NULL value 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 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
Below programs illustrate the use of the documents.links property in HTML:
Example 1: Using the length property to count the number of links elements in the collection.
html
<!DOCTYPE html><html><head> <title> DOM document.links() Property </title> <!-- script to count links --> <script> function countLinks() { let collection = document.links.length; document.querySelector(".count").innerHTML = collection; } </script></head><body> <h1>GeeksforGeeks</h1> <h2>Articles:</h2> <ul> <!-- list of links --> <li><a id="js" href= Javascript-Tutorial </a></li> <li><a id="python" href= Python Programming Language </a></li> <li><a id="cpp" href= C++ Programming Language </a></li> <li><a id="html" href= HTML Tutorials </a></li> </ul> <!-- button to count number of links --> <button onclick="countLinks()"> Count links </button> <br> <br> <span>Total links: </span> <span class="count"></span></body></html> |
Output:
Example 2: HTML code to find all links in the document and return their IDs.
html
<!DOCTYPE html><html><head> <title> DOM document.links() Property </title> <script> /* function to find IDs */ function findLinkIDs() { let final = ''; let collection = document.links; // Run a for loop upto the number of // links in the collection for (let i = 0; i < collection.length; i++) { // Add each link id to a list final += `<li> ${collection[i].id} </li>`; } // Replace the HTML of the ID div document.querySelector(".ids").innerHTML = final; } </script></head><body> <h1>GeeksforGeeks</h1> <h2>Articles:</h2> <ul> <!-- list of links --> <li><a id="js" href= Javascript-Tutorial </a></li> <li><a id="python" href= Python Programming Language </a></li> <li><a id="cpp" href= C++ Programming Language </a></li> <li><a id="html" href= HTML Tutorials </a></li> </ul> <!-- button to find id --> <button onclick="findLinkIDs()"> Find link IDs </button> <p>The IDs of all the links are: </p> <div class="ids"></div></body></html> |
Output:
Before Click on the button:
After clicking the button:
Example 3: Using the id property to find by link ID and display its href attribute
html
<!DOCTYPE html><html><head> <title> DOM document.links() Property </title> <script> function returnLinkByID() { let collection = document.links.namedItem("js"); // Get the href attribute let link = collection.href; document.querySelector(".name").innerHTML = link; } </script></head><body> <h1>GeeksforGeeks</h1> <h2>Articles:</h2> <ul> <!-- collection of links --> <li><a id="js" href= Javascript-Tutorial </a></li> <li><a id="python" href= Python Programming Language </a></li> <li><a id="cpp" href= C++ Programming Language </a></li> <li><a id="html" href= HTML Tutorials </a></li> </ul> <button onclick="returnLinkByID()"> Find by link ID </button> <p> The href attribute in the link with id of 'js' is: </p> <div class="name"></div></body></html> |
Output:
Before Click on the button:
After click on the button:
Supported Browsers: The browser supported by DOM links collection method are listed below:
- Chrome 1 and above
- Edge 12 and above
- Internet Explorer 4 and above
- Firefox 1 and above
- Opera 12.1 and above
- Safari 1 and above
Please Login to comment...