Vanilla JS equivalent for counting number of child elements using className
š„ Limited Time Offer
Coding with AI: Learn to build a SaaS MVP in 10 days
Master practical AI development to build and launch your startup MVP in weeks instead of months. Learn to leverage AI tools and APIs effectively.
- šÆ Build real MVP: AI-powered SaaS from idea to launch
- š¤ Integrate ChatGPT, Claude, and other AI APIs efficiently
- š° Implement AI features users will pay for
- ā”ļø AI-assisted coding patterns to ship 10x faster
- š Launch your product in 10 days, not 10 months
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 š