HTML | DOM links Collection - GeeksforGeeks

13 Aug, 2021
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="https://www.geeksforgeeks.org/javascript-tutorial/">                Javascript-Tutorial            </a></li>         <li><a id="python" href="https://www.geeksforgeeks.org/python-programming-language/">                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-tutorials/">                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="https://www.geeksforgeeks.org/javascript-tutorial/">                Javascript-Tutorial            </a></li>         <li><a id="python" href="https://www.geeksforgeeks.org/python-programming-language/">                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-tutorials/">                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="https://www.geeksforgeeks.org/javascript-tutorial/">                Javascript-Tutorial            </a></li>         <li><a id="python" href="https://www.geeksforgeeks.org/python-programming-language/">                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-tutorials/">                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
Internet Explorer
Firefox
Opera
Safari
 
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
hritikbhatnagar2182
HTML-DOM
Picked
Technical Scripter 2018
HTML
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to Insert Form Data into Database using PHP ?
REST API (Introduction)
Form validation using HTML and JavaScript
Express.js express.Router() Function
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript