Last year, I wrote about Native JS Like jQuery and Class handling with classlist which did not catch the eyes of many, so had to blog about JavaScript vs jQuery+CoffeeScript which is getting decent number of hits, but still feels like the message is not conveyed clearly!

I have great respect for jQuery, but at the same time really like the sheer power of vanilla JS.

The power of vanilla JavaScript (Few more examples) :

Below code for event listeners is one such soild example, credits @alunny

1
2
3

var $ = document.querySelectorAll.bind(document);
Element.prototype.on = Element.prototype.addEventListener;
$("somelink")[0].on('touchstart', handleTouch);

We can append, prepend or remove a child with ease :

1
2
3
4
5

parent.appendChild(child) // append child.

parent.insertBefore(child, parent.childNodes[0]) // prepend child.

child.parentNode.removeChild(child) // remove child.

Looping through a NodeList :

1
2
3
4

[].forEach.call( document.querySelectorAll('a'),
function  fn(elem){
    console.log(elem.src);
});

Convert a NodeList to a List :

1

myList = Array.prototype.slice.call(myNodeList);

Select element for data attribute :

1

var matches = el.querySelectorAll('iframe[data-src]');

DYK!? getElementsByTagName() returns a Live NodeList which is faster than querySelectorAll() which returns a static NodeList.

(Anyway let that DYK fact apart)

Nesting many levels :

1

var cells = document.querySelectorAll("#score>tbody>tr>td:nth-of-type(2)");

Selecting multiple IDs :

1

var x = document.querySelector("#bar, #foo");

Change CSS inline :

1

document.querySelector("#mainLink").style.cssText = 'color:red'

Test if element contains :

1
2

var child = document.querySelector('#child');
console.log(document.querySelector('parent').contains(child));

That's it I can think of now, will update as and when my brain.signals me with new ideas.

Do feel free to share your ideas in the comment section!

Happy Hacking till then.

Update 0 :

For all those who are questioning about browser compatibility, please check out this graph

Few reactions from reddit :

Substack says :

Module systems and package managers give you these benefits and even more without the bloat of lumping everything into a single kitchen sink like jquery. For ajax, when you use something like browserify require('http') works for requests like it does in node with xhr wrappers that work all the way down to IE6. See the bottom of my recent post about this. If you think this example is uglier than the jquery version it's trivial to wrap it in a different api but you get streaming updates as the default.
The biggest problem with jquery is that it doesn't compose well since it tries to do so much. It's really hard to publish reusable components with a jquery dependency as a result and it doesn't scale up well when you want to be using dozens of modular components.

zzzev says :

I agree if your goal is implementing stuff in a way that's cross browser compatible, but there is definitely a class of projects that doesn't need JQuery, like mobile sites where bandwidth is crucial and you're specifically targeting one device. If all you need are the DOM API functions mentioned in this link, well, it's kind of nice to not have JQuery if you don't need it.

TheGameHippo [JS Purist] says :

I kindly point you to this jsperf test that I just made.
Both Chrome and FireFox show element.value is faster than $elements.val();
As to the reason, I believe jQuery uses a map function or similar to apply the value to each element. This has the overhead of an additional function call per element.