snippetjavascriptTip

Create your own query selector shorthand in vanilla JavaScript

Submitted by: @import:30-seconds-of-code·Mar 2, 2026·

Viewed 0 times

javascriptshorthandyourvanillaqueryownselectorcreate

Problem

Most of us are familiar with jquery and probably quite a few of us are familiar with the Chrome console's $ and $$ shorthands for query selectors. I recently figured out a way to replicate these shorthands in my code, using Document.querySelector(), Document.querySelectorAll() and Function.prototype.bind(). Here's how to do it, just make sure you don't mix them up with jquery if you are still using it:

Solution

const $ = document.querySelector.bind(document);
const $ = document.querySelectorAll.bind(document);

const mainContent = $('.main-content');
const externalLinks = $('a[target="_blank"]');

Code Snippets

const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);

const mainContent = $('.main-content');
const externalLinks = $$('a[target="_blank"]');

Context

From 30-seconds-of-code: query-selector-shorthand

Revisions (0)

No revisions yet.