I remember the days of jQuery, when we could use
$ to target anything in the DOM.
document.querySelector() quite often, which functions very similarly to jQuery’s
Luckily, we can bind
const $ = document.querySelector.bind(document); const $$ = document.querySelectorAll.bind(document);
Let’s see what we can do with
document.querySelector(), which only selects first matching element.
$('.text').style.color = "#fff"; $('#text').innerHTML = "Hello!";
document.querySelectorAll(), which returns a NodeList of all matching elements?
$$('img').forEach(img => console.log(img.src));
This functionality is actually already available in Chrome’s DevTools without the need to manually bind
If you need assistance at any stage, please feel free to contact me.