Open In App

HTML DOM links Collection

Last Updated : 09 Jun, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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.links

Properties: It contains a 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 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

The below programs illustrate the use of the documents.links property in HTML:

Example 1: Using the length property to count the number of link 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: 

 

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: 

 

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


Previous Article
Next Article

Similar Reads

Difference between normal links and active links
Websites are designed to point you to different resources. You can move from one website to another through links. Links help you to get information from different resources. Links are established in simple HTML web pages through &lt;a&gt; tag.Links are categorized into three types. Typically a Link is displayed in three different colors based on t
2 min read
HTML DOM forms Collection
The DOM forms collection is used to return the collection of all &lt;form&gt; elements in a HTML document. The form elements are sorted as they appear in the source code. Syntax: document.forms Properties: It returns the number of form in the collection of elements. Methods: The DOM forms collection contains three methods which are listed below: [i
4 min read
HTML DOM scripts Collection
The DOM scripts Collection in HTML is used to return the collection of all &lt;script&gt; elements in an HTML document. The script elements are sorted as appear in the sourcecode. Syntax: document.scripts Property Value: It returns the single value length which is the collection of all script elements. Method: [index]: It is used to return the &lt;
2 min read
HTML DOM embeds Collection
The DOM embeds collection property in HTML is used to return the collection of all embedded elements. The elements in the collection are sorted that appear in the source code. This property is used for read-only. Syntax: document.embedsProperty: This property contains a value length that returns the number of elements in the document. Methods: The
3 min read
HTML DOM images Collection Property
The images collection property in HTML is used to return the collection of &lt;img&gt; elements in the document. It can be used for knowing the count of images inserted in the document using the &lt;img&gt; tag. The &lt;input&gt; elements with type = image are not counted in the image property. Syntax: document.imagesProperty: It returns the number
3 min read
HTML | DOM Table rows Collection
The Table rows collection is used for returning the collection of all the &lt;tr&gt; elements in a table. The sequence of the &lt;tr&gt; elements are sorted in the same way as their position in the source code. Syntax tableObject.rows Properties length : It is used to return the number of &lt;tr&gt; elements in the collection. Methods [index] : It
2 min read
HTML | DOM Table tBodies Collection
The Table tBodies collection is used for returning the collection of all the &lt;tbody&gt; elements in a table. The sequence of the &lt;body&gt; elements are sorted in the same way as their position in the source code. Syntax tableObject.tBodies Properties length : It is used to return the number of &lt;tbody&gt; elements in the collection. Methods
2 min read
HTML | DOM Datalist options Collection
The Datalist Options Collection is used to set or return the collection of all options value in a datalist. The elements in the collection are in sorted order. Syntax: datalistObject.options Properties: length: It is used to return a number of &lt;option&gt; element in the collection. It is read only Property. Methods: The DOM option collection con
2 min read
HTML DOM applets Collection
The applets collection would return a collection of all possible elements available in the HTML document object model. Initially the element was used to embed the Java application with HTML DOM. Soon after the Javascript plugins were introduced, the applet element was deprecated. Syntax: document.applets Property values: length: The length property
2 min read
HTML | DOM Map areas Collection
The Map areas Collection in HTML DOM is used to return the collection of all &lt;area&gt; elements in an image-map. The area elements are sorted as they appear in the source code. Syntax: mapObject.areas Properties: It returns the number of area in the collection of elements.Methods: The DOM Map areas Collection contains three methods which are lis
2 min read