HTML - DOM Element childElementCount Property

The HTML DOM Element childElementCount property is used to retrieve the count of direct child elements of a specified element (or parent element). The term 'direct child' refers to the immediate child elements of the parent element.

It is similar to the children.length property, which retrieves the total number of child elements. Unlike the childNodes property, it counts only the child elements, excluding text nodes and other non-element nodes.

Syntax

Following is the syntax of the HTML DOM Element chileElementCount property −

element.childElementCount;

Parameters

Since this is a property, it will not accept any parameter.

Return Value

This property returns an Integer value, which is the count of the direct child elements.

Example 1: Counting Direct Child Elements

The following program demonstrates the usage of the HTML DOM Element chileElementCount property by counting the number of direct child elements −

HTML DOM Element childElementCount Property
Counting Direct Child Element

   
Parent Div
   
Paragraph 1
   
Paragraph 2
   

      
List Item 1
      
List Item 2
   

Count Child Elements

When the button clicks, the total number of child elements will be displayed.

Example 2: Checking for Child Elements

Here is another example of the chileElementCount property. We use this property to check whether the element has any child node or not −

HTML DOM Element childElementCount Property
Checking if an element has Child Elements

   
Parent Div
   
Paragraph 1
   
Paragraph 2
   

      
List Item 1
      
List Item 2
   

Check Child Elements



    

The above program checks and displays the "Yes! The parentDiv has child elements" message.

Example 3: The childElementCount with Loop

In the example below, the chileElementCount property is used within the for-loop to iterate through the child element within the div and displays information about children −

 



HTML - DOM Element childElementCount Property
Using childElementCount and Loop
  

   
Parent Div
   
Paragraph 1
   
Paragraph 2
   

      
List Item 1
      
List Item 2
   

Loop Through Child

Once the above program is executed, it accesses and displays the information about the child elements.

Supported Browsers

Property
childElementCount	Yes 1.0	Yes 12	Yes 1.0	Yes 3.1	Yes 9.5