Sometimes a full blown javascript library like JQuery, MooTools, or Dojo is impractical.
I just had such a project, but the one feature I could not live without was CSS3 selectors. Walking the DOM manually would have taken hours to implement correctly, especially since each page needed to be treated differently. My first thought was to rip out the JQuery selector functions. That’s when I discovered Sizzle.
Sizzle is the CSS3 selector engine written by John Resig that was originally written for JQuery and is now also used in Dojo. Since it’s a standalone library, you can also use it directly for your projects.
The first step is simple, you need to include the Sizzle js file in your page. Once you do that, you can call Sizzle just as you would call $ in normal JQuery.
Examples:
// get all divs
Sizzle("div")
// Get all links in the paragraphs in the sidebar
Sizzle("#sidebar p a")
// Get all li elements under a ul
Sizzle("ul > li")
Just like JQuery, right? Well no. Unlike JQuery, which returns a JQuery object that can be accessed with JQuery’s easy and cross browser API’s. Sizzle returns a list of elements.
If you wanted to set the text of the first link element to “Go To This Page,” then what you’d have to do is the following:
var elements = Sizzle("#sidebar p a");
elements[0].innerHTML = "Go To This Page";
If the necessary manipulations are simple, using Sizzle standalone is the way to go. It’s much smaller than a full blown JS library and it gives you what’s normally the most painful part.
