HTML - DOM Element childElementCount Property

Quiz

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 −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element childElementCount</title>
</head>
<body>
<h3>HTML DOM Element childElementCount Property</h3>
<p>Counting Direct Child Element</p>
<div class="container" id="parentDiv">
   <h2>Parent Div</h2>
   <p>Paragraph 1</p>
   <p>Paragraph 2</p>
   <ul>
      <li>List Item 1</li>
      <li>List Item 2</li>
   </ul>
</div>
<button onclick="countChildElements()">Count Child Elements</button>
<p id="result"></p>
<script>
   function countChildElements() {
      let parentDiv = document.getElementById('parentDiv');
      let childElements = parentDiv.children.length;
      document.getElementById('result').textContent = 
	  `Number of direct child elements: ${childElements}`;
   }
</script>
</body>
</html>

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 −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element childElementCount</title>
<style>
   .container {
        margin: 20px;
        padding: 10px;
        border: 1px solid #ccc;
   }
</style>
</head>
<body>
<h3>HTML DOM Element childElementCount Property</h3>
<p>Checking if an element has Child Elements</p>
<div class="container" id="parentDiv">
   <h2>Parent Div</h2>
   <p>Paragraph 1</p>
   <p>Paragraph 2</p>
   <ul>
      <li>List Item 1</li>
      <li>List Item 2</li>
   </ul>
</div>
<button onclick="checkChildElements()">Check Child Elements</button>
<p id="result"></p>
<script>
   function checkChildElements() {
       let parentDiv = document.getElementById('parentDiv');
       if (parentDiv.hasChildNodes()) {
       document.getElementById('result').textContent = 
	   'Yes! The parentDiv has child elements.';
       } else {
       document.getElementById('result').textContent = 
	   'No! The parentDiv does not have child elements.';
       }
   }
</script>
</body>
</html>

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 −

<!DOCTYPE html>
<html lang="en">
<head> 
<style>
   .container {
       margin: 20px;
       padding: 10px;
       border: 1px solid #ccc;
   }
</style>
</head>
<body>
<h3>HTML - DOM Element childElementCount Property
<p>Using childElementCount and Loop</p>  
<div class="container" id="parentDiv">
   <h2>Parent Div</h2>
   <p>Paragraph 1</p>
   <p>Paragraph 2</p>
   <ul>
      <li>List Item 1</li>
      <li>List Item 2</li>
   </ul>
</div>
<button onclick="loopThroughChildElements()">Loop Through Child</button>
<p id="result"></p>
<script>
   function loopThroughChildElements() {
      let parentDiv = document.getElementById('parentDiv');
      let childCount = parentDiv.childElementCount;
      let result = '';
      for (let i = 0; i < childCount; i++) {
         let childElement = parentDiv.children[i];
         result += `${childElement.tagName}: 
         ${childElement.textContent}<br>`;
      }
      document.getElementById('result').innerHTML = result;
   }
</script>
</body>
</html>

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

html_dom.htm

Print Page