DEV Community

Discussion on: Use $ & $$ Instead of document.querySelector/All in JavaScript without jQuery

View post
Collapse
 
webreflection profile image
Andrea Giammarchi •

Chrome has its own Console Utilities API Reference where $ and $$ are offered regardless, among other utils, unless the global scope has been overwritten with something else (i.e. jQuery).

The API for $ and $$ is more jQuery-ish, and if you'd like to reproduce it its like:

const $ = (css, parent = document) => parent.querySelector(css);
const $$ = (css, parent = document) => parent.querySelectorAll(css);
Enter fullscreen mode Exit fullscreen mode

To avoid needing polyfills for forEach or Symbol.iterator on NodeList collections, you can also go ahead and convert the static collection as Array so that all methods, including filter and map can be used.

const $$ = (css, parent = document) =>
  Array.from(parent.querySelectorAll(css));
Enter fullscreen mode Exit fullscreen mode

If you don't have Array.from in your debug session, or you are after a thin layer that works across browsers, you can go for the following:

function $(css, parent) {
  return (parent || document).querySelector(css);
}

function $$(css, parent) {
  var nodes = (parent || document).querySelectorAll(css);
  return Array.prototype.slice.call(nodes, 0);
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
stebeus profile image
Stebeus •

Sorry for replying an old post, but how does this method of aliasing these two query selectors compares to the OP's post for development, especially for the parent parameter?