How can I emulate the jQuery $ selector in pure javascript?

Question

Using the jQuery $ selector makes getting DOM elements a lot easier. I want to be able to replicate this selector in plain javascript. How would I do this?

Note: I do not want to replace all instancew of $('')in my code with document.querySelector(), rather, I want to define $ as a function.

@DontVoteMeDown I want to be able to use it to select DOM elements like I would use it in jQuery, so how can I achieve this? — Return Null, Jul 18 '18 at 18:57
Implement `document.querySelectorAll()` inside your `$` function I guess... — DontVoteMeDown, Jul 18 '18 at 18:57
But bear in mind it is not that simple, jQuery selector does a lot of things behind-the-scenes.. — DontVoteMeDown, Jul 18 '18 at 18:59
I believe jQuery has a module of DOM manipulation only.. can't recall if it is the jQuery core or other specific part of it. — DontVoteMeDown, Jul 18 '18 at 19:06
In addition to comments above, since you would need a lot of code to add to emulate every jQuery selector funcionality, it might be better to use querySelector and querySelectorAll, to preserve small footprint. It might overload the performance in browsers — Nikola Kirincic, Jul 18 '18 at 19:06
@Barmar possibly.. Slim is not not just for DOM manipulation as I learned [here](https://stackoverflow.com/a/37750393/1267304), but it is a nice suggestion. It would be nice if jquery had a [download builder](https://jqueryui.com/download/) like jquery ui tho... — DontVoteMeDown, Jul 18 '18 at 20:24

score 1 · Accepted Answer · answered Jul 18 '18 at 20:00

You're looking for document.querySelectorAll(). You don't need to use the querySelectorAll method on document, it can be any DOM Element. If you want to use it in a style somewhat similar to jQuery, you can write a function that wraps it, like this:

var $ = function (selector) {
  return document.querySelectorAll(selector);
};

That example assumes you're using ES5 or older, and rewriting it in newer versions of the language should be trivial.

Keep in mind that this will return a NodeList, not an Array you might think it does, so many methods from it won't be there.

How can I emulate the jQuery $ selector in pure javascript?

1 Answers1

Linked

Related