Get the number of children of an element

Let's assume the following HTML structure:

HTML
<div class = 'Parent'>
    <h2>Children</h2>
    <div class = 'Child'></div>
    <div class = 'Child'></div>
    <div class = 'Child'></div>
</div>

If you want to know how many children the parent has:

javascript
// Here you get the total number of children h2 and div.Child included
let total_children  = document.querySelector('.Parent').childElementCount;

console.log(total_children);
// 4

// Here you get the number of div.Child
let num_class_Child = document.querySelector('.Parent').getElementsByClassName('Child').length;

console.log(num_class_Child);
// 3

Hi, I'm Erik, an engineer from Barcelona. If you like the post or have any comments, say hi.