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 specific HTML elements, text nodes, and comment nodes that are nested inside other HTML elements when working with HTML documents.

Method 1: Using the childNodes Property

The childNodes property returns a NodeList of all child nodes, including text nodes and comments. To count only element nodes, we need to check each node's nodeType property:

Example

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

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

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

console.log('Child elements count:', count);
</script>

Child elements count: 3

This method filters out text nodes and comments, counting only HTML elements. The text "Some text" is not counted as it's a text node, not an element.

Method 2: Using the children Property (Recommended)

The children property returns an HTMLCollection containing only element nodes that are direct children. This is the simplest and most efficient method:

Example

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

<script>
const parent = document.querySelector('#parent2');
const count = parent.children.length;

console.log('Child elements count:', count);
</script>

Child elements count: 3

This method automatically excludes text nodes and comments, making it the most straightforward approach.

Method 3: Using querySelectorAll

The querySelectorAll method with the child selector (> *) selects all direct child elements:

Example

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

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

console.log('Child elements count:', count);
</script>

Child elements count: 3

The > * selector means "all direct children elements". This method is useful when you need more complex selector logic.

Comparison

Conclusion

The children.length property is the recommended method for counting child elements as it's simple, fast, and automatically excludes text nodes and comments. Use querySelectorAll only when you need advanced selector functionality.