jQuery to JavaScript – Part 3

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')
//

jQuery to JavaScript – Part 2

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 to JavaScript – Part 1

In a nutshell, most of the time, jQuery targets DOM element(s) and manipulate it, apart from other utility methods like AJAX.

Almost most of the jQuery commands starts with $ and selector like

//
//
$('.class-name')
//
//

The above command basically targeting DOM element which has class name ‘class-name’. We can replace this with

//
//
document.querySelectorAll('.class-name')
//
//

You may validate what particular DOM element(s) selected based on selector, in the chrome browser’s developer toolbar console tab by typing the command.

Almost all latest browsers supports this method querySelectorAll.