How I can find number of child elements present in parent element [ Solved ]

Question

<div class="parent">
<span></span>
<span></span>
<span></span>
<span></span>
</div>

🔥 Tell me how can I find no of child present in div.parent element

Answer 1

There are various ways to know about child elements . HERE ARE SOME OF THEM.

var p = document.querySelector('.parent')

1. p.childElementCount

2. p.children.length

3. Interesting way
var childs = document.querySelectorAll('.parent > *');
childs.length // gives you total number of children

PS: I suggest you go to dev tools of browser and console log the parent you can find various properties related to it.

Happy Coding. 😊

Answer 2

document.querySelector(".parent").children.length

//4

Answer 3

This can be finded e.g.:
let span_0 = document. getElementById("mySpans").[0];

Answer 4

Here are two ways
1.first Of all
document.querySelector(".parent").children.length
It will return 4

2.use it:
Document.getElementsByTagName("span")[1];

(you can also access 2 span if you give an id to it)

Answer 5

document.querySelectorAll(“.parent > *”).length;

this selects all elements that are a direct descendant of .parent