Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Number of elements a particular tag contains in JavaScript?

Javascript Web Development Front End Technology

In this article we are going to learn about counting the number of child elements a particular tag contains in JavaScript with suitable examples.

There are two main approaches to count child elements in JavaScript. You can use the childElementCount property to count direct child elements, or use the length property with methods like getElementsByClassName() to count elements by class name.

Let's explore both methods with practical examples to understand how to count elements effectively.

Using the childElementCount Property

The childElementCount property returns the number of direct child elements within a specific parent element. It only counts element nodes, not text nodes or comments.

Syntax

document.getElementById('elementId').childElementCount;

Where elementId is the ID of the parent element whose child elements you want to count.

Example 1

This example demonstrates counting child elements within a div container:

<!DOCTYPE html>
<html>
<head>
    <title>Count Child Elements</title>
</head>
<body>
    <h3>Counting Child Elements with childElementCount</h3>
    
    <div id="social-media">
        <p>Popular websites used by young generation:</p>
        <a href="#">Google</a>
        <a href="#">Facebook</a>
        <a href="#">Instagram</a>
    </div>
    
    <p id="result1"></p>
    
    <script>
        const childCount = document.getElementById("social-media").childElementCount;
        document.getElementById("result1").innerHTML = 
            "Number of child elements: " + childCount;
    </script>
</body>
</html>

Number of child elements: 4

Example 2

Another example showing how to count paragraph elements within a container:

<!DOCTYPE html>
<html>
<head>
    <title>Count Car Brand Elements</title>
</head>
<body>
    <h3>Car Brands Example</h3>
    
    <div id="cars">
        <p>Popular car brands in India:</p>
        <p>Maruti Suzuki</p>
        <p>Hyundai</p>
        <p>Toyota</p>
        <p>KIA</p>
    </div>
    
    <p id="result2"></p>
    
    <script>
        const carCount = document.getElementById("cars").childElementCount;
        document.getElementById("result2").innerHTML = 
            "Total child elements in cars div: " + carCount;
    </script>
</body>
</html>

Total child elements in cars div: 5

Using the length Property

The length property combined with methods like getElementsByClassName() allows you to count elements based on their class name, regardless of their parent container.

Syntax

document.getElementsByClassName('className').length;
// or within a specific parent
parentElement.getElementsByClassName('className').length;

Example 3

This example counts elements by their class name within a specific container:

<!DOCTYPE html>
<html>
<head>
    <title>Count by Class Name</title>
</head>
<body>
    <h3>Counting Elements by Class Name</h3>
    
    <div id="car-brands">
        <p>Popular brand cars in India:</p>
        <p class="cars">Maruti Suzuki</p>
        <p class="cars">Toyota</p>
        <p class="cars">Hyundai</p>
        <p class="cars">KIA</p>
    </div>
    
    <p id="result3"></p>
    
    <script>
        const root = document.getElementById('car-brands');
        const carElements = root.getElementsByClassName('cars');
        document.getElementById("result3").innerHTML = 
            "Number of elements with class 'cars': " + carElements.length;
    </script>
</body>
</html>

Number of elements with class 'cars': 4

Comparison

Method Use Case Counts
childElementCount Direct child elements of a specific parent All direct child elements
getElementsByClassName().length Elements with specific class name Elements matching the class

Key Points

  • childElementCount only counts direct child elements, not nested grandchildren
  • getElementsByClassName().length can count elements across the entire document or within a specific parent
  • Both methods return integer values representing the count
  • Text nodes and comments are not counted by childElementCount

Conclusion

Use childElementCount when you need to count direct child elements of a specific parent. Use getElementsByClassName().length when counting elements by class name, offering more flexibility in element selection.

Updated on: 2026-03-15T23:18:59+05:30

1K+ Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements