How to find a number of anchors in a document in JavaScript?

Javascript Web Development Front End Technology

This article discusses about how to find the number of anchors in a document in JavaScript. The anchor tag is a part of HTML DOM elements. The anchor property is a read only property that returns a list of anchor tags inside a document. The anchor object is represented as <a>.

There are two ways to get the length of the anchors object. One way is to use the anchors.length property that returns the number of anchor tags in a document. The other way is to use getElementByTagName method to access the anchor tag and use the length property. Both internally counts the number of <a> tags inside a document.

Syntax

The syntax to find the number of anchors in a document is shown below.

document.anchors.length or document.getElementsByTagName("a").length

Let us see the examples of these −

Example 1

In the following example, three anchor tags were used and their length was displayed using document.anchors.length as shown in the output.

<html>
<body>
   <a name="Tutor">Tutorix</a><br>
   <a name="Totorial">Tutorialspoint</a><br>
   <a name="Totorials">Tutorialspoint private ltd</a><br>
   <script>
      document.write(document.anchors.length);
   </script>
</body>
</html>

On executing the above code, the following output is generated.

Example 2

The following is an example program to find the number of anchors in a document.

<html>
<head>
   <title>How to find the number of anchors in a document in JavaScript</title>
</head>
   <h3>To find the number of anchor tags in a document</h3>
   <body style = "text-align:center;">
      <p>The most popular websites that are used by young generation are :</p>
      <a href="#">Google</a> <br/>
      <a href="#">Facebook</a> <br/>
      <a href="#">Instagram</a> <br/>
      <p id="text1"></p>
      <script type="text/javascript">
         document.getElementById("text1").innerHTML = "The number of anchor tags is : "+document.getElementsByTagName("a").length;
      </script>
   </body>
</html>

On executing the above code, the following output is generated.

Example 3

Following is an example program to count the number of anchor tags inside a particular div tag.

<!DOCTYPE HTML>
<html>
<head>
   <title>How to find the number of anchors in a document in JavaScript</title>
<head>
   <h3>To find the number of anchor tags in a document</h3>
   <body style = "text-align:center;">
      <p>The most popular websites that are used by young generation are :</p>
      <div id="websites">
         <a href="#">Google</a> <br/>
         <a href="#">Facebook</a> <br/>
         <a href="#">Instagram</a> <br/>
      </div>
      <p>The most popular cars are :</p>
      <div id="Cars">
         <a href="#">BMW</a> <br/>
         <a href="#">AUDI</a> <br/>
         <a href="#">RANGE ROVER</a> <br/>
         <a href="#">MARUTI SUZUKI</a> <br/>
      </div>
      <p id="text1"></p>
      <script type="text/javascript">
         var count = document.getElementById("Cars").getElementsByTagName("a").length;
         document.getElementById("text1").innerHTML = "The number of anchor tags for the mentioned div tag 'Cars' is : "+count;
      </script>
   </body>
</html>

On executing the above code, the following output is generated.