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.

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:
Count links before

Example 2: HTML code to find all links in the document and return their IDs.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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

Maybe this silence is dangerous

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.