javascript get number of child elements

Javascript: Getting the Number of Child Elements

As a front-end developer, I often come across a situation where I need to know the number of child elements present in a parent element. Here, I will explain how to get the number of child elements in JavaScript.

Using the childElementCount property:

The easiest way to get the number of child elements in JavaScript is by using the childElementCount property. This property returns the number of child elements for a given parent element.

const parentElement = document.querySelector('.parent');
const numberOfChildElements = parentElement.childElementCount;

console.log(numberOfChildElements); // Output: 3

In the above code, I have first selected the parent element using querySelector(), and then used the childElementCount property to get the number of child elements present inside the parent element. The output in this case would be 3.

Using the children property:

The second way to get the number of child elements is by using the children property. This property returns an HTMLCollection object that contains all the child elements of a given parent element. We can then use the length property of this HTMLCollection object to get the number of child elements.

const parentElement = document.querySelector('.parent');
const childrenArray = parentElement.children;
const numberOfChildElements = childrenArray.length;

console.log(numberOfChildElements); // Output: 3

In the above code, I have first selected the parent element using querySelector(), and then used the children property to get all the child elements inside the parent element. Then, I have used the length property of the HTMLCollection object to get the number of child elements present inside the parent element. The output in this case would be 3.

These are the two ways to get the number of child elements present inside a parent element in JavaScript.