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 |