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:
- Get all elements whose ID starts with specific String in JS
- Get all DOM Elements by its Attribute in JavaScript
- Get all Elements in a Form using JavaScript
I’m Edward Anderson. My current job is as a programmer. I’m majoring in information technology and 5 years of programming expertise. Python, C, C++, Javascript, Java, HTML, CSS, and R are my strong suits. Let me know if you have any questions about these programming languages.
Name of the university: HCMUT
Major: CS
Programming Languages: Python, C, C++, Javascript, Java, HTML, CSS, R