Adding HTML5 query selector to browsers dont't support it

Question

I'm using HTML5 selectors API aka querySelector all the time. Those selectors are really easy to use and handful. If you're not familiar with this API it's pretty much similar to jQuery selector API they get a CSS selector string and select right elements. For example these selectors works same:

jQuery('#div') == document.querySelectorAll('#div')

jQuery('.myClass a') == document.querySelectorAll('.myClass a');

Browser support of this API is pretty good. IE8 supports them. The only two browsers that don't support this API is IE7 and IE6. I'm looking for solution to add this functionality to IE7 and IE6. For me querySelectorAll and querySelector is enough but if there was a way to implement more functions it would be great!

I started looking into jQuery code, they did it before so it would be good place to see how they created the selector API but I didn't understand the code. Any idea?

Answer 1

You can simply use the original Sizzle engine which jQuery uses (written by John Resig, author of jQuery).

Here's Sizzle's own description:

A pure-JavaScript CSS selector engine designed to be easily dropped in to a host library.

---

If you want to be sure that you don't use Sizzle if querySelectorAll is natively supported (even though Sizzle will always use querySelectorAll when available), use this:

if ( ! document.querySelectorAll ) document.querySelectorAll = Sizzle;

Answer 2

It is usually a bad idea to use complex selectors to find elements as it tightly binds the script functionality to the layout and presentation of the document. A simpler strategy should be employed, such as using ids, classes or grouping elements in the document.

If you do that, then analyse your requirements, you may find you only need a couple of simple selectors. In that case, the standard DOM methods of accessing elements may do 90% of the job and you just need to add a bit of filtering. e.g. '#id' is just getElementById (which is what jQuery/Sizzle actaully uses for that selector), and '.myClass a' can use a fairly simple getElementsByClassname function (most browsers have one built in) with a filter for A elements.

Of course such functions could first test for qSA support and use it if available.

Note also that there are a number of live document collections already avaialbe that can be very efficient to use, and also the early DOM collections (such as getElementsByTagName) were live too. I'm pretty sure the qSA returns static collections because that's what javascript libraries with selectors had been doing.

Anyhow, food for thought.