Making a short alias for document.querySelectorAll

Question

I'm going to be running document.querySelectorAll() a whole lot, and would like a shorthand alias for it.

var queryAll = document.querySelectorAll

queryAll('body')
TypeError: Illegal invocation

Doesn't work. Whereas:

document.querySelectorAll('body')

Still does. How can I make the alias work?

Answer 1

This seems to work:

const queryAll = document.querySelectorAll.bind(document);

bind returns a reference to the querySelectorAll function, changing the context of 'this' inside the querySelectorAll method to be the document object.

The bind function is only supported in IE9+ (and all the other browsers) - https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind

---

Update: In fact you could create shortcuts to a whole range of document methods like this:

const query     = document.querySelector.bind(document);
const queryAll  = document.querySelectorAll.bind(document);
const fromId    = document.getElementById.bind(document);
const fromClass = document.getElementsByClassName.bind(document);
const fromTag   = document.getElementsByTagName.bind(document);