Power of Vanilla JS

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@alunnyvar $ = 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 :parent.appendChild(child) // append child.

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

child.parentNode.removeChild(child) // remove child.Looping through a NodeList :[].forEach.call( document.querySelectorAll(‘a’),
function fn(elem){
});Convert a NodeList to a List :myList = Array.prototype.slice.call(myNodeList);Select element for data attribute :var matches = el.querySelectorAll(‘iframe[data-src]’);DYK!?getElementsByTagName()returns a Live NodeList which is faster thanquerySelectorAll()which returns a static NodeList.(Anyway let that DYK fact apart)Nesting many levels :var cells = document.querySelectorAll(“#score>tbody>tr>td:nth-of-type(2)”);Selecting multiple IDs :var x = document.querySelector(“#bar, #foo”);Change CSS inline :document.querySelector(“#mainLink”).style.cssText = ‘color:red’Test if element contains :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 graphFew 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.Linksubstack.net/…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.jspref linkjsperf.com/…

News Reporter

Leave a Reply

Your email address will not be published. Required fields are marked *