Onebite.dev

Developer tips & trick, one bite at a time

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

🏊🏾‍♀️ Back Home