Dev console trick: selector helpers
Yesterday, Laurence Hughes let me know about an awesome dev console trick he learned from Remy Sharp in a live stream.
You can use $()
as a shorthand for querySelector()
, and $$()
as a shorthand for querySelectorAll()
. Even better, $$()
returns an array instead of a NodeList, so you can use all of the array methods with the returned results.
// Get the first h3 element
var h3 = $('h3');
// Get all h3 elements
var h3s = $$('h3');
They look like this under-the-hood.
var $ = function (selector) {
return document.querySelector(selector);
};
var $$ = function (selector) {
return Array.from(document.querySelectorAll(selector));
};
I would not use these in production code, but its great for quickly testing stuff live in your UI.
I tested these in the latest versions of Chrome, Firefox, and Safari, and it worked in all three. I don’t have access to IE or Edge right now to test.