Simple jquery like selector for vanilla javascript
jQuery make us love javascript. One of the simplest but most useful feature for me is the selector in jQuery
With just using $ dollar sign, we can target the element. Let’s make it happen in our vanilla javascript
Custom selector function in vanilla JS
Do you know that $ sign is valid for a function name?
That’s the trick! we will create a new function that will return an element based on parameter we used.
If hashtag (#) , means id
If dot sign (.) , means class
if nothing, then normal HTML tag
function $(el) {
const type = el.charAt(0)
switch (type) {
case "#":
return document.querySelector(el)
break;
case ".":
return document.querySelectorAll(el)
break;
default:
return document.getElementsByTagName(el)
}
}
How to use this custom element
Just like our friend, jQuery
$('form')[0].classList.add("is-hidden") //targeting first form and add classname
$('#tools').innerHTML = 'im new content!' //targeting div with id 'tools' add change the text