JavaScript’s Element.childElementCount read-only property returns the number of the Element’s child elements.

Value

The number of the element’s child elements.

Examples

Here is an example of using the childElementCount property.

Suppose we have the following HTML elements:

<ul id="menu">
 <li>Home</li>
 <li>About Us</li>
 <li>Contact Us</li>
</ul>

How can we count the number of the child elements of the ul element with JavaScript?

We can select the ul element with the getElementById() method and use the childElementCount property:

let menu = document.getElementById('menu');
console.log(menu.childElementCount);

You should now be able to see the number of the child elements in the console of your browser.

Browser compatibility

Chrome
Edge
Firefox
Internet Explorer
Opera
Safari
Chrome (Android)
Firefox (Android)
Opera (Android)
Safari (iOS)
Samsung Internet
WebView (Android)
childElementCount 1 12 3.5 9 10 4 18 4 10.1 3 1.0 37