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 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.
Today, we are going to expose some inner working of angular 2.
You know what, the double curly braces aka interpolation always seems awesome magic.
<h1>{{ text }} </h1>
Really, this is sugar syntax for:
<h1 [innerText]=”text”></h1>
Yeah… angular 2 property binding using DOM attribute directly. So, is it possible to add class to a div tag?? Well
<h1 [className]=”active”></h1>
This is equivalent to
h1 = document.querySelector(‘h1’);
h1 = ‘active’; // className is property of DOM element div
Interesting, isn’t it?
Rajakvk's Blog 