How to count all child elements of a particular element using JavaScript ?

How to count all child elements of a particular element using JavaScript ?

Last Updated : 15 Feb, 2023

Given an HTML document containing some elements nested elements and the task is to count all the child elements of a particular element. It is very simple to count the number of child elements of a particular element using JavaScript. For example: If you have a parent element consisting of many child elements then you can use HTML DOM childElementCount property to count all the child elements of a particular element.

Syntax

node.childElementCount

Example:

html

<h1 style="color:green">GeeksforGeeks</h1>

<h3>
    Click the button to count all<br>
    children the div element
</h3>

<h5>Count all child elements of <ul> elements</h5>
<ul id="parentID">
    <li>First element</li>
    <li>Second element</li>
    <li>Third element</li>
    <li>Fourth element</li>
</ul>

<button onclick="myGeeks()">
    Click Here!
</button>

<h5 id="GFG"></h5>

<script>
    // This function count the child elements
    function myGeeks() {
        var count = document.getElementById(
            "parentID").childElementCount;
    
        document.getElementById("GFG").innerHTML
            = "Total Number of Child node: "
            + count;
    }
</script>

Output:

How to count all child elements of a particular element using JavaScript ?

How to count all child elements of a particular element using JavaScript ?

_tanya_sri_

Improve

Article Tags :

Similar Reads

How to get the child element of a parent using JavaScript ?

Given an HTML document, the task is to select a particular element and get all the child elements of the parent element with the help of JavaScript. Below are the approaches to get the child element of a parent using JavaScript:Table of ContentBy using the children propertyBy using the querySelector

How to calculate the XOR of array elements using JavaScript ?

In this article, we are given an array, and the task is to find the XOR of Array elements using JavaScript. There are two approaches to solve this problem which are discussed below: Method 1: It uses a simple method to access the array elements by an index number and use the loop to find the XOR of

How to Check if an element is a child of a parent using JavaScript?

In this article, we are going to see the methods by which we can Check if an element is a child of a parent using JavaScript. These are the following methods: Table of Content Using the Node.contains() methodLooping through the parents of the given childUsing the hasChildNodes() methodMethod 1: Usin

How to Get and Set Scroll Position of an Element using JavaScript ?

In this article, we will learn how to get and set the scroll position of an HTML element using JavaScript.Approach: We will be using the HTML DOM querySelector() and addEventListener() methods and the HTML DOM innerHTML, scrollTop and scrollLeft properties.We create an HTML div element with an id of

How to return true if the parent element contains the child element in JavaScript ?

In JavaScript, children property returns an array of those elements which are children of a given element. In order to check whether the parent element (say x) contains a child element (say y), we can use the children property to get the array of all children of x and then check whether the array ob

How to select all sibling elements of an element using jQuery ?

In this article, we will discuss how to select all sibling elements of an element using jQuery. To select all sibling elements of an element, we will use the siblings() method. The siblings() method is used to find all sibling elements of the selected element. The siblings are those having the same

How to select all next sibling elements of an element using jQuery ?

In this article, we will discuss how to select all the next sibling elements of an element using jQuery. To select all the next sibling elements of an element, we will use nextAll() method. The nextAll() method is used to find the next sibling elements of the selected element. The siblings are those

How to Get the Content of an HTML Comment using JavaScript ?

In this article, we will learn how to get the content of an HTML Comment Using Javascript. Comments are a best practice in programming and software development. In general, they can explain why a coding decision was made or what needs to be done to improve the code you're working on. HTML tags (incl

How to count child element using jQuery ?

It is very simple to count the number of child elements in the HTML file using jQuery. For example: If you have a parent element consisting of many children elements then you can use .length or.children().length method as given below. Syntax: var len=$("#parentID").length; or var count = $("#parentI

Remove all the child elements of a DOM node in JavaScript

In HTML, child elements are nested within parent elements, and there are times when you may need to remove these child elements from the DOM. This can be done using JavaScript DOM methods. In this article, we'll explore two common methods for removing child elements from a DOM node.Why Remove Child