How to find the number of anchors with JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we will learn how to find the number of anchors used in an HTML document with JavaScript. Sometimes, During the development of a web page, the developer may need to add multiple links to the different buttons present on the webpage using multiple anchors for each button. In such a situation, if you want to find the number of anchor elements, you can use the anchors property.

JavaScript allows us to use the anchors property to count the number of anchors (<a> elements) in an HTML document.

Note − The document.anchors property is deprecated and no longer recommended to use.

Let us discuss the anchors property in detail.

Document.anchors

We will use the anchors property to get the number of anchors (<a> elements) in the document. The anchors property will return an HTMLCollection that contains all anchors stored like elements of an array inside it; then by using the length property we can get the length of the collection which will be the number of anchors in the document.

Syntax

let a = document.anchors;
let b = a.length;

In the syntax above, first we will get an HTMLCollection in variable a then we use the length property on the collection to get the number of anchors in the document.

Steps

Step 1 − In first step, we will define multiple anchors in our HTML document
Step 2 − In this step, we will use the above syntax to get the collection as well as the length of it that will be the number of anchors in the document.
Step 3 − The third step will display the result or the number of anchors on the user screen in numerical form.

Let us discuss it with help of program examples.

Example 1

Below example will explain the use of anchors property to get the number of anchors in an HTML document with JavaScript −


<html>
<body>
   <h3>Find the number of anchors</h3>
   <a href="https://www.tutorialspoint.com/php" name="PHP">PHP</a><br>
   <a href="https://www.tutorialspoint.com/java/"
   name="Java">Java</a><br>
   <a href="https://www.tutorialspoint.com/html5/"
   name="HTML5">HTML5</a><br>
   <a href="https://www.tutorialspoint.com/css/" name="CSS">CSS</a><br>
   <a href="https://www.tutorialspoint.com/javascript/"
   name="JavScript">JavaScript</a><br>
   <a href="https://www.tutorialspoint.com/python"
   name="Python">Python</a><br>
   <p id="result"></p>
   <script>
      let anchors = document.anchors;
      let noOfAnchors = anchors.length;
      document.getElementById("result").innerHTML = "The number of anchors in the document: <b>" + noOfAnchors + "</b>";
   </script>
</body>
</html>

In the above example, we create a JavaScript variable named anchors and get all the anchors in form of HTMLCollecton inside it; then we have used the length property to get the number of anchors in the document and stored it inside the noOfAnchors variable.

Let us see another example to see the behavior of the anchors property if the anchors are nested inside each other.

Example 2

The below code example will show the behavior of the anchors property when the anchors are nested inside one another.


<html>
<body>
   <h3>Find the number of anchors with JavaScript</h3>
   <a href="https://www.tutorialspoint.com/php" name="PHP">
   PHP    
   <a href="https://www.tutorialspoint.com/java/" name="Java">Java</a>
   </a><br>
   <a href="https://www.tutorialspoint.com/html5/" name="HTML5">
   HTML5    
   <a href="https://www.tutorialspoint.com/css/" name="CSS">CSS</a>
   </a><br>
   <a href="https://www.tutorialspoint.com/javascript/" name="JavScript">
   JavaScript    
   <a href="https://www.tutorialspoint.com/python"
   name="Python">Python</a>
   </a>
   <p id="result"></p>
   <script>
      let anchors = document.anchors;
      let noOfAnchors = anchors.length;
      document.getElementById("result").innerHTML = "The number of anchors in the document: <b>" + noOfAnchors + "</b>";
   </script>
</body>
</html>

In this example, we have seen that the behavior of the anchors property is the same in the case of nested anchors as we have seen before. Here, even after adding the anchors in nested the number of total anchors is 6 same as in the previous case, which means the anchors property returns the number of anchors in the document whether they are nested or next to each other.

NOTE − In the above example, is used to provide the space between the text present inside the HTML elements.

Let us see one more code example to see the behavior of anchors property if we use the multiple anchors inside the different button −

Example 3

The below example will illustrate the behavior of anchors property when the anchors used inside the button −


<html>
<body>
   <h3>Find the number of anchors with JavaScript</h3>
   <button>
      <a href="https://www.tutorialspoint.com/php" name="PHP">PHP</a>
   </button>
   <button>
      <a href="https://www.tutorialspoint.com/java/"
      name="Java">Java</a>
   </button>
   <button>
      <a href="https://www.tutorialspoint.com/html5/"
      name="HTML5">HTML5</a>
   </button>
   <button>
      <a href="https://www.tutorialspoint.com/css/" name="CSS">CSS</a>
   </button>
   <button>
      <a href="https://www.tutorialspoint.com/python"
      name="Python">Python</a>
   </button>
   <button>
      <a href="https://www.tutorialspoint.com/javascript/"
      name="JavScript">JavaScript</a>
   </button>
   <p id="result"></p>
   <script>
      let anchors = document.anchors;
      let noOfAnchors = anchors.length;
      document.getElementById("result").innerHTML = "The number of anchors in the document: <b>" + noOfAnchors + "</b>";
   </script>
</body>
</html>

In the above example, we have seen how the anchors property will behave when the anchor is used inside the button tag which is similar to the above two examples discussed above.

In this tutorial, we have learned about the anchors property of JavaScript, which can be used to get the number of anchors present inside the HTML document if used according to the syntax discussed above in the tutorial. We also saw the code implementation to check the behavior of the anchors property when the anchors are used inside the button tag as well as inside each other in nested form.

Abhishek

Updated on: 31-Oct-2022

116 Views

Kickstart Your Career

Get certified by completing the course

Get Started