Count the elements in a div using JavaScript

Count the Elements in a Div using JavaScript

We will learn how to count the elements in a div using JavaScript with a couple of solutions that are: getElementsByTagName() and childElementCount or children.length. Let’s get started!

How to count the elements in a div using JavaScript?

Using getElementsByTagName()

This method is the most basic method to any new programmers. You can find its syntax and usage here. To count the elements in a div, we need to make sure what kind of elements in a div you want. Suppose we have a document like this:

<html>
  <body>
    <div id="target">
      <div>
        <p>LearnShareIT</p>
      </div>
      <p>LearnShareIT</p>
      <p>LearnShareIT</p>
      <p>LearnShareIT</p>
    </div>
    <script type="text/javascript">
      let divTarget = document.getElementById("target");
      
      // Count the elements in a div using JavaScript
      let res = divTarget.getElementsByTagName("*");
      alert(res.length);
    </script>
  </body>
</html>

Output: 

5

The above example defined many elements inside the target div. As you can see, the result returns five, which is the total number of elements that are descendants of that div instead of the children elements only. The logic behind this approach is very simple, as the getElementsByTagName() method will understand the string “*” character passed as a condition that matches all names instead of the “*” character, as you may mislead.

Then why is the result 5, it is because inside our target Div tag, there is a total 5 tags, that means it can be the children of its child tag, and the children of that children and so on. However, if the result is not what you want but instead you want to count the immediate child elements only (which is expected 4), then you can read the next solution.

Using childElementCount or children.length

These are two properties of any HTML element, but not a method. They will return the number of child nodes of an element.

Syntax:

HTMLElement.childElementCount 

HTMLElement.children.length

You can easily count the elements which are the immediate children of a div using the first syntax or the second one. For example:

<html>
  <body>
    <div id="target">
      <div>
        <p>LearnShareIT</p>
      </div>
      <p>LearnShareIT</p>
      <p>LearnShareIT</p>
      <p>LearnShareIT</p>
    </div>
    <script type="text/javascript">
      let divTarget = document.getElementById("target");
      
      // Count the elements in a div using JavaScript
      let res1 = divTarget.childElementCount;
      alert(res1);
      
      // Count the elements in a div using JavaScript
      let res2 = divTarget.children.length;
      alert(res2);
    </script>
  </body>
</html>

Output: 

4
4

As can be seen, this approach only produces the result 4 instead of 5 as the previous one. This is because it neglects the children of its children element inside the div tag. In short, it only counts the elements whose parent node is the div we desired.

Summary

We have discovered how to count the elements in a div using JavaScript. We suggest you to use the childElementCount or children.length; however you should read the first one before implementing it. If you have any questions, please leave us a reply.

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *