My book API design for beginners is getting ready. Subscribe now to get your free copies when it get published.
BlogVideos
#react
#css
#javascript
#mongodb
#tech talks
#Logrocket Blog

Vanilla JS equivalent for counting number of child elements using className

August 10, 2019🍿 1 min readEdit this post on Github

This is part 2 of 2 in my series on "You don't need jQuery"

Follow me on twitter. I share quick tips, my reading list and also about free workshop and webinars around web and mobile development everyday.

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>

Count using jQuery

$('.li-node').length;

Count using Vanilla JS

document.querySelectorAll('.li-node').length;

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 😎

Subscribe for my e-book

Subscribe to get free copies of my book API design for beginners once it is published. You can see the progress of the book here.

Share:

Made with ❤️ in Tallinn, Estonia

Paramanantham Harrison's DEV Profile