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 |