How to Count all Child Elements of a Particular Element using JavaScript?

Child Node

A node that is immediately nested inside another node in a document tree or DOM (Document Object Model) tree is referred to as a child node in JavaScript.

Child nodes are in specific HTML elements, text nodes, and comment nodes that are nestled inside of other HTML elements when working with HTML documents.

Method 1: Using the childNodes Property

Utilizing the childNodes property is one method of counting child components. The NodeList of all child nodes, including text nodes and remarks, is returned by this property. We can loop through the NodeList and examine each node's nodeType property to enumerate only the element nodes:

Algorithm

• Start

• Select the parent element using the querySelector method and assign it to a variable 'parent'.

• Initialize a variable 'count' with a value of 0.

• Iterate through each child node of the parent element using the forEach method and pass a callback function with 'node' as a parameter:

• a. Check if the node is an element node using the nodeType property and comparing it to Node.ELEMENT_NODE.

• b. If the node is an element node, increment the count variable by 1.

• After iterating through all child nodes, output the count variable to the console.

• End.

Example

<div id="parent">
  <p>Child 1</p>
  <p>Child 2</p>
  <span>Child 3</span>
  Some text
</div>

const parent = document.querySelector('#parent');
let count = 0;

parent.childNodes.forEach(node => {
  if (node.nodeType === Node.ELEMENT_NODE) {
    count++;
  }
});

console.log(count);

Using querySelector, we first choose the parent element in this code. Next, we set a count variable's starting value to 0. Using the forEach function, we loop through the childNodes NodeList, increasing the count variable for each node that is an element node.

Method 2: Using the children property

Using the children property is another method to enumerate child elements. Only element nodes that are the parent element's immediate children have been included in the HTMLCollection that this property provides. To obtain the total, we only need to use this collection's length property:

Algorithm

• Start

• Select the parent element using the querySelector method and assign it to a variable 'parent'.

• Get the number of child elements of the parent element using the children's property and assign it to a variable 'count'.

• Output the count variable to the console.

• End.

Example

<div id="parent">
  <p>Child 1</p>
  <p>Child 2</p>
  <span>Child 3</span>
  Some text
</div>

const parent = document.querySelector('#parent');
const count = parent.children.length;

console.log(count);

In this code, we first get the length property of the children collection by using querySelector to pick the parent element.

Method 3: Using querySelectorAll:

Finally, we can enumerate child elements using the querySelectorAll method. A NodeList of all the elements that match the given selector is returned by this method. Only immediate components can be chosen using the child selector (>):

Algorithm

• Start

• Select the parent element using the querySelector method and assign it to a variable 'parent'.

• Use the querySelectorAll method with the selector '> *' to select all child elements of the parent element and assign them to a variable 'elements'.

• Get the number of child elements in the elements variable and assign it to a variable 'count'.

• Output the count variable to the console.

• End.

Example

<div id="parent">
  <p>Child 1</p>
  <p>Child 2</p>
  <span>Child 3</span>
  Some text
</div>

const parent = document.querySelector('#parent');
const count = parent.querySelectorAll('> *').length;

console.log(count);

In this code, we first use querySelector to pick the parent element, and then querySelectorAll to select all elements that are the immediate children of that element using the child selector (>). The length attribute of the resulting NodeList is then obtained.

Conclusion

JavaScript offers several methods for counting child components, each with unique benefits and drawbacks. The most flexible method is childNodes, which counts any type of child node but needs more programming to exclude non−element nodes. The children method only includes immediate children but is the most straightforward. The querySelectorAll technique is also straightforward and can be used to choose child elements at any level, but it necessitates an understanding of CSS selectors.