Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML | DOM links Collection

  • Last Updated : 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: 
 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  • [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: 
 

Count links before

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: 
 

Find IDs Before

After clicking the button: 
 

Find IDs After

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: 
 

Find by ID before

After click on the button: 
 

Find by ID after

Supported Browsers: The browser supported by DOM links collection method are listed below: 
 

  • Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!