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>

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.

https://codepen.io/Param-Harrison/pen/ZgqpWd

Hope you learned a simple trick in vanilla JS 😎

Visual Guide to API Design Best Practices

This visual eBook covers essential best practices for designing robust APIs using REST principles.

This book is ideal for beginners and backend developers seeking to enhance their API design skills. However, it is not suited for those seeking an in-depth exploration of API design. This book is a quick read under 40 slides like scrolling through your instagram feed.