Examples

Typical use of CSS Selectors in JavaScript is to find all elements that match
a certain selector, similar to what XPath does. This example will find all
h1 elements with class name title in the document:

gl.selector.queryAll(document, 'h1.class');

Also, the implementation can match single elements against a selector, just like browsers do.
This is what CSS selectors are optimised for by design, and where it stands out compared to XPath.
The following example will return true if the provided element is a checkbox:

Performance

Overall, performance is pretty good. It caches the parse trees so that a selector is only
parsed the first time, and also preprocesses certain tests to increase performance.

It is also relatively easy to add optimisations that make it use browser-based
XPath and CSS Selectors where possible,
because of the simple object representation of the parsed selector,
although it currently does not do that.

You can take a look at the SlickSpeed test for some performance
comparisons, although I don’t think the testing method is very precise. Generally there does
not seem to be not much performance difference between frameworks.

To minify the JavaScript code, I recommend the
YUI Compressor tool. You can invoke
it from the command line like this:

Selector support

At the time of writing, the library supports all CSS3 Selectors, except for pseudo-element
selectors and the following pseudo-class selectors: :link, :visited,
:hover, :active and :focus.

The Selectors implementation is tested with a bunch of
unit tests, which
particularly focuses on edge cases and browser issues. Additionally, the code is used in the
Backbase AJAX library which also has its own set of
unit tests, covering a broader set of common cases.

Also you can run the Selectors implementation through John Resig’s
Selectors test suite, where it gets a 98.7% score. The remaining 1.3%
consists of lack of :hover support and wrong result order for selector groups (which is hard
to implement efficiently, and not really important because I don’t actually implement the
Selectors API).

Supported browsers

In principle, all browsers should be supported. Standard DOM methods are used. Specific
tweaks are made for common browsers such as Firefox, Internet Explorer 6 and up, Safari and
Opera. Please let me know if something doesn’t work in a certain browser (that is not
ancient).

Revision history

1.1.2 — 2010-03-30

Again fix some variables leaking into global scope since 1.1.0

1.1.1 — 2010-01-22

Fix some variables leaking into global scope since 1.1.0

1.1.0 — 2010-01-11

Small optimisation of child node combinator

Fixed bug where comment nodes could be returned in IE

Fixed bug with child selector in XHTML mode in Opera

Now with even more object orientedness

1.0.9 — 2009-10-16

Fixed matching of attributes with empty value

Fixed the enctype attribute in IE 6 and 7

Fixed child selector issue in Firefox 3.5

Fixed parsing error for :not(:lang(en))

Refactoring and more unit tests

1.0.8 — 2009-06-12

Fixed child selector bug in Safari

Fixed bug in ~= attribute selector

Dropped IE 5.5 support

1.0.7 — 2009-03-06

Implement :enabled, :disabled, :checked, :read-only and :read-write

1.0.6 — 2009-02-13

Implement :not()

Implement :target

Provide experimental Selectors API wrapper script

Tested against John Resig’s Selectors API test

Fixed bug in the child selector

Fixed bug in :empty

Fixed bug in :lang

Fixed bug in character escaping

1.0.5 — 2008-06-25

Added a third argument to queryAncestor to indicate which node to stop at