As lightweight as jQuery already is, sometimes I want something smaller than a 24KB minified JavaScript library for its core functionality: the $('#id > .class') part. Sizzle offers just that.

John Resig developed the Sizzle standalone JavaScript library for simply selecting XML/DOM elements. You could download it straight from GitHub for 32KB but the point of using the library is also to reduce overhead so we'll need to minify it. I used the YUI Compressor and reduced the size to 15KB, already a 9KB difference.

Getting Started with Sizzle

If you are familiar with jQuery, implementing Sizzle will be easy: drop the file into a website directory and reference it in the header of the web page. In this example, we will make a simple box-background-toggler.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sizzle Examples</title>

<script type="text/javascript" src="sizzle.js"></script>

</head>
<body>

<div class="foo"></div>

</body>
</html>

Here is a sample index.html file that references Sizzle and also has a div#foo for testing out some of the functionality. Sizzle will handle the DOM while still flexible enough so that we can implement our own event-bindings and algorithms.

A Little Style Goes a Long Way

<style type="text/css">
.foo {
  width: 200px;
  height: 200px;
  background-color: red;
}
</style>

Throw in the CSS into the header to make our #foo box red and square. Then, we will toggle the color to blue.

Laissez-Faire in JavaScript through Sizzle

The first thing we want to do is shorten the the Sizzle object. In this scenario we will use the standard $ but you can also be creative and use _.

<script type="text/javascript">
var $ = Sizzle;
</script>

Next, we want to the DOM tree to load before we start manipulating objects just to be sure that nothing is undefined.

<script type="text/javascript">
var init = function() {
  var $ = Sizzle;
};

window.onload = init;
</script>

This is where Sizzle does its job and handles DOM selection for us. It does nothing more than necessary like a laissez-faire type of government, giving the coding economy much more flexibility.

<script type="text/javascript">
var init = function() {
  var $ = Sizzle;
  var foo = $('.foo');
};

window.onload = init;
</script>

One of the gotchas of Sizzle is that it always returns an array of items regardless of how many items are in the array meaning that foo is an array of a single element.

Sizzle is also especially useful for cross-compatibility issues that native DOM scripting has trouble with on some browsers cough IE cough.

Cross-Compatibility Issue: getElementsByClassName() is not supported in any version below IE9 which is only available for Windows 7; subsequently, any Operating System before Windows 7 would be left out if getElementsByClassName() was used.

Finally, we want to implement the event-bindings for toggling the background color of our box.

<script type="text/javascript">
var init = function() {
  var $ = Sizzle;
  var foo = $('.foo');
  foo[0].onclick = function() {
    this.style.backgroundColor = (this.style.backgroundColor.indexOf('blue') === 0) ? 'red' : 'blue';
  };
};

window.onload = init;
</script>

Remember that foo is an array of elements and the first element is the one we want. We bind the event to an anonymous function that uses a ternary operation to toggle the colors.

That's it. Test the code and the box should toggle between red and blue background colors.

OOP and Loose Coupling

Sizzle has a very small footprint on our code and is, therefore, loosely coupled (exciting for OOP JavaScript enthusiasts). If jQuery has a bit too much for you, try out Sizzle and let me know how it works for you.