Lightweight alternative to jQuery for class / id selecting

Question

Let's say I want to build a non-dependent javascript framework/script. Is there a way to utilize jQuery's amazing class and element selecting functionality

$('.this') or $('#this') or $('div', '.this')

Without being dependent on jQuery or using jQuery if it is available but if not, it works without it? I have searched this high and low. Maybe I am searching incorrectly as the closest I have gotten is this:

Selecting elements without jQuery

However, that is not as in-depth as I want or as similar as I want to jQuery. I have thought about digging through jQuery source and gutting that piece out and using it, but I hope someone has already done this and I am just looking in the wrong place and someone else knows about it.

Update

This has been answered in a few ways, and thank you to the quick replies. I was searching in the wrong method. I finally came on: https://github.com/ded/qwery

However this answer here does the job perfectly: Lightweight alternative to jQuery for class / id selecting

I'm not sure why you can't just use jQuery? Until functionality like this is built into browsers in a standard way (HAH!), you're stuck with using utility libraries like jQuery. — SoWeLie, Oct 13 '11 at 03:29
It's for a script where you aren't needed to rely on jQuery, but can use it if available. Not everyone uses jQuery and I would like to tap into that source and before I go code my own, I was hoping there is already something made like this. — Nijikokun, Oct 13 '11 at 03:32
If you really need to make the app lightweight, then don't use a gutted jQuery. Go search the web for a framework that is designed only for dom navigation and manipulation. There are dozens of frameworks out there, I'm sure there's one that fits your needs closely. — Ben Lee, Oct 13 '11 at 03:33
The `id` selector is easy enough: `document.getElementById('#id`)`. So far not as well supported, but [document.getElementsByClassName()](https://developer.mozilla.org/en/DOM/document.getElementsByClassName), which will return a list. — Jared Farrish, Oct 13 '11 at 03:39
Don't be so pessimistic SoWeLie. This functionality is available to about 70% of internet users though document.querySelectorAll. Only IE6 and IE7 don't have it and you could polyfill back to something like jQuery in that case. — Brian Nickel, Oct 13 '11 at 03:45
Queries were never needed in the first place. Clever DOM traversal (try to think recursive) along with some RegExp checks on an element's `className` can get the job done. Rely mostly on `id`s if you can. — , Oct 13 '11 at 04:00

score 14 · Answer 1 · answered Oct 13 '11 at 03:32

14

You could do what jQuery does and use Sizzle: http://sizzlejs.com/

answered Oct 13 '11 at 03:32

Greg Pettit

10,749
5
53
72

score 13 · Answer 2 · answered Oct 13 '11 at 03:37

13

The answer to "I need a small JS library that..." is this site: http://microjs.com/

specifically, you're looking for a selector engine:

http://microjs.com/#css

answered Oct 13 '11 at 03:37

DA.

39,848
49
150
213

Nice collection, neatly organized by microjs.com. Not sure why they don't include Sizzle (smaller than some on microjs) but certainly a bunch of worthy options! – Greg Pettit Oct 13 '11 at 03:40
I found Qwery, which I know is on there and it does the job and is smaller than Sizzle. Thanks for the suggestion however @GregPettit – Nijikokun Oct 13 '11 at 03:41
My pleasure. Be sure to 'accept' DA's answer as it was the most helpful to you. :) – Greg Pettit Oct 13 '11 at 03:43
It was before Brian posted his which is the smallest and fastest implementation, and works for what I need. – Nijikokun Oct 13 '11 at 03:44
That *is* odd that sizzle isn't on the list. I want to say I saw it on there before... – DA. Oct 13 '11 at 05:04

Brian Nickel · Accepted Answer · 2011-10-13T04:17:46.217

6

In everything but IE6 and IE7, you can use document.querySelectorAll or someElement.querySelectorAll to perform similar selection functionality.

Update more details:

It looks like ZeptoJS does the following. This uses quick functions for $$(document, '#myid'), $$(document, '.myclass'), $$(document, 'div') and slow searches for $$(document, 'div > .myclass')

var classSelectorRE = /^\.([\w-]+)$/,
    idSelectorRE = /^#([\w-]+)$/,
    tagSelectorRE = /^[\w-]+$/;

$$ = function(element, selector){
  var found;
  return (element === document && idSelectorRE.test(selector)) ?
    ( (found = element.getElementById(RegExp.$1)) ? [found] : [] ) :
    Array.prototype.slice.call(
      classSelectorRE.test(selector) ? element.getElementsByClassName(RegExp.$1) :
      tagSelectorRE.test(selector) ? element.getElementsByTagName(selector) :
      element.querySelectorAll(selector)
    );
}

edited Oct 13 '11 at 04:17

answered Oct 13 '11 at 03:33

Brian Nickel

26,890
5
80
110

There is however a syntax issue, before `slice.call` you are missing `[].` – Nijikokun Oct 13 '11 at 03:57
That's true. This was a cut and paste. Zepto defined `emptyArray = [], slice = emptyArray.slice`. I will update the code above. – Brian Nickel Oct 13 '11 at 04:16
Is this a performance thing or why isn't querySelectorAll used in all cases? – Wolfgang Stengel Aug 28 '20 at 06:27

score 3 · Answer 4 · answered Oct 13 '11 at 03:33

3

Have you looked at zepto.js? You'd still be dependent on a framework, but it's much lighter weight: about 5kb instead of 31kb.

answered Oct 13 '11 at 03:33

nrw

819
2
7
22

score 2 · Answer 5 · answered Apr 22 '15 at 06:16

2

Just try jBone, library for Events and DOM manipulation. jBone has much better performance then jQuery/Zepto, smaller size and full support for all selectors, events API's.

answered Apr 22 '15 at 06:16

kupriyanenko

374
3
4

score 1 · Answer 6 · answered Oct 23 '12 at 18:18

1

MicroSelector. Even smaller and faster than Zepto, which is smaller than Sizzle, which is smaller than JQuery.

answered Oct 23 '12 at 18:18

Engineer

8,529
7
65
105

Lightweight alternative to jQuery for class / id selecting

6 Answers6

Linked

Related