DEV Community

Paramanantham Harrison
Paramanantham Harrison

Posted on • Originally published at learnwithparam.com on

Vanilla JS equivalent for counting number of child elements using className

Sometimes, we learn lot of bigger things but miss on small learnings. I want to create small posts on vanilla JS to do things without libraries or frameworks on simple pages.

It is very easy to count number of elements using jquery. First we will see it in jQuery and then on vanilla JS.

<ul>
  <li class="li-node">Children 1</li>
  <li class="li-node">Children 2</li>
  <li class="li-node">Children 3</li>
  <li class="li-node">Children 4</li>
  <li class="li-node">Children 5</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Count using jQuery

$('.li-node').length;
Enter fullscreen mode Exit fullscreen mode

Count using Vanilla JS

document.querySelectorAll('.li-node').length;
Enter fullscreen mode Exit fullscreen mode

document.querySelectorAll select all the elements with class name and returns an array of html element, then we can use the array length property to find the count.

Hope you learned a simple trick in vanilla JS 😎

Top comments (1)

Collapse
 
pappychulow profile image
pappy🇨🇦

i need one that counts it as it is been added to the dom