This is continuation of series. Read previous part.
Frequently in jQuery, we need to add class to a selected DOM element using below syntax
//
$('#id-of-DOM-element').addClass('class-name-to-be-added');
//
Well, the vanilla JavaScript equivalent is simple and straight forward like below
//
document.getElementById('id-of-DOM-element').classList.add('class-name-to-be-added');
document.getElementById('id-of-DOM-element').classList.remove('class-name-to-be-added')
//
This is continuation of series. Read previous part.
Instead of document.querySelectorAll()
you may use
//
DOMelement.querySelectorAll('.any-class-name')
//
which will look for ‘any-class-name’ only inside your ‘DOMelement’
This is kind of jQuery’s find method like below
//
$('#DOMelement').find('.any-class-name')
//
jQuery initially released on August 26, 2006 by John Resig. The entire web community started its journey towards this particular JavaScript library. As on October 12, 2018 still 83,547,613 websites using jQuery as per builtwith trends.
After browsers become ever green and newer version of JavaScripts like ES6 started flowing, the return journey became inevitable. Inbound journey may not be as fast as out bound journey but return journey has started already.
It may not be possible to ignore jQuery right away but it is good time to use as much as vanilla JavaScript possible in place of jQuery. In that direction, this series going to talk about JavaScript equivalents of jQuery most used methods.
This series is for who already knew jQuery and wants to get rid of it gradually to use plain JavaScript instead using its latest features.
jQuery to JavaScript, the return journey – Introduction.
Rajakvk's Blog 