Open In App

HTML DOM anchors Collection

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The HTML DOM anchors collection is used to return the collection of all <a> elements. It only counts those <a> element that has the name attribute only. The name attribute of the anchor element does not support HTML 5. The elements in the collection are sorted that appear in the source code.

Syntax:

document.anchors

Note: The DOM anchor collection has been deprecated.

Property: The anchor collection property contains a value length that returns the number of <a> elements in the document.

Methods: The DOM anchors collection contains three methods which are given below: 

  • [index]: It is used to return the <a> element of the selected index. The index value starts with 0. It returns NULL if the index value is out of range.
  • item(index): It is used to return the <a> element of selected index. The index value starts with 0. It returns NULL if the index value is out of range.
  • namedItem(id): It is used to return the <a> element from the collection with the given id attribute. It returns NULL if the id is not valid.

Return Value: An HTMLCollection Object, representing all <a> elements in the document that have a name attribute. The elements in the collection are sorted as they appear in the source code

Example 1: In this example, we will use DOM anchors collection.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>DOM anchors collection</title>
</head>
 
<body style="text-align: center;">
    <h1>GeeksforGeeks</h1>
 
    <h2>DOM anchors Collection</h2>
     
    <a name="">GeeksforGeeks</a><br>
 
    <a name="">Sudo Placement</a><br>
     
    <a name="">GFG</a><br><br>
 
    <button onclick="Geeks()">
        Submit
    </button>
     
    <p id="sudo"></p>
 
    <script>
        function Geeks() {
            let x = document.anchors.length;
            document.getElementById("sudo").innerHTML
                = "Number of Anchors elements: " + x;
        }
    </script>
</body>
 
</html>


Output: 

anchor-collection

Example 2: In this example, we will use DOM anchors collection.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>DOM anchors collection</title>
</head>
 
<body style="text-align: center;">
    <h1>GeeksforGeeks</h1>
 
    <h2>DOM anchors Collection</h2>
     
    <a name="">GeeksforGeeks</a><br>
    <a name="">Sudo Placement</a><br>
    <a name="">GFG</a><br><br>
     
    <button onclick="Geeks()">
        Submit
    </button>
     
    <p id="sudo"></p>
     
    <script>
        function Geeks() {
            let x = document.anchors[1].innerHTML;
            document.getElementById("sudo").innerHTML
                = "Second Anchor element: " + x;
        }
    </script>
</body>
 
</html>


Output: 

anchor-collection-2

Supported Browsers:

  • Google Chrome
  • Firefox
  • Opera
  • Safari


Last Updated : 02 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads