Selector.js

A small, fast, standard compilant, cross-browser implementation of an CSS3 Query Selector. Currently the Selector API (querySelectorAll) is only available in browsers based on WebKit (Safari and Chrome) and the soon to be released Firefox 3.1 and Internet Explorer 8. Similar selectors are also available in frameworks like base2, Dojo, Ext, jQuery, MooTools and Prototype. But, if you want to use query selection today without the bulky frameworks, our stand-alone selector is for you.

For fast queries, our implementation uses either DOM Level 3 XPath or pre-compiled JavaScript DOM traversal. The matched Element’s is always returned in a standard Array so iteration functions like forEach can be used. And to ease integration with other frameworks, the Selector class has hook functions to extend the result Element’s (patchElement) and Array (patchArray).

Selector.js supports all Simple selectors and Attribute selectors without namespace, all Combinators, Class selectors, ID selectors and all Pseudo-class selectors except the Dynamic pseudo-classes :hover and :visited, which isn’t possible with JavaScript/DOM. The other frameworks support a non-standard pseudo-selector :contains() and attribute compare operator !=, ours don’t.

Intuitive usage, context node (document) optional:

// Normal constructor syntax:
new Selector('div > p').exec(document).forEach(function (e) {
  e.style.color = 'red';
});
// Or, the shorthand syntax:
Selector('div > p', document).forEach(function (e) {
  e.style.color = 'red';
});

To do

• Sort result elements in document order for group (comma) selectors. Currently working on a fast enough way to overcome WebKit’s lack of compareDocumentPosition.
• Use RegEx for attribute comparison in Internet Explorer, it’s faster.
• Improve the :nth- indexing and lookup, maybe index elements when traversing.

Changelog

• 2009-02-28 v0.6: Improved unique element (:active, :focus, :root and :target)selector speed by accessing them directly, avoiding traversal. Fixed bug when matching * elements with -of-type pseudo selectors. Better syntax error reporting.
• 2009-02-11 v0.5: Improved #id, :active, :focus, :root and :target speed by exiting all ancestor selections when the match is found.
• 2009-02-09 v0.4: Some speed improvements; Made patchElement and optional function, only calling it when defined. Not using sourceIndex as node hash. Direct insert into array instead of using push.
• 2009-02-07 v0.3: Code cleanup and additional speed improvements. Not using getElementById in Internet Explorer since it also matches name attribute.
• 2009-02-01 v0.2: Rewrite, dropping XPath usage. Improved index caching. Compacted the source code further.
• 2009-01-20 v0.1: Initial public release.

Documentation

The generated online documentation can be found here.

Download

• Minfied: Selector.js (7.7 K, ~3.2 K when gzipped)
• Source: Selector.js (15.3 K)
• Modified Slickspeed test suite, no frameworks included: slickspeed.tar.gz (42 K)
  

License

Apache License, Version 2.0 <http://www.apache.org/licenses/LICENSE-2.0>

Author

Henrik Lindqvist <henrik.lindqvist@llamalab.com>