Sly, New Selector Engine & How to Use in MooTools

You\’ve heard of selector engines right? The engine that parses the HTML to match a string argument to return matching HTML elements? How about Sizzle and Peppy (two fast selector engines) that was released? Or how a couple JS frameworks were implementing Sizzle and the MooTools dev team decided not to follow suit?

Now, have you heard of Sly, the new selector engine on the block? No? That\’s because Harald Kirschner just released it yesterday, 03/25/09, and I can\’t tell you how awesome it is.. or can I?

I\’ll start you off with a brief description… and graphs!

Sly is a turbocharged, cross-browser, library-agnostic JavaScript class for querying DOM documents using CSS3 selectors.

And turbocharged it sure is, just check out the stats!

The benefits:

• Pure and powerful JavaScript matching algorithm for fast and accurate queries
• Extra optimizations for frequently used selectors and latest browser features
• Works uniformly in DOM documents, fragments or XML documents
• Utility methods for matching and filtering of elements
• Standalone selector parser to produce JavaScript Object representations
• Customizable pseudo-classes, attribute operators and combinators
• Just 3 kB! (minified and gzipped, 8 kB without gzip)
• No dependencies on third-party JS libraries, but developers can override internal methods (like getAttribute) for seamless integration.
• Code follows the MooTools philosophy, respecting strict standards, throwing no warnings and using meaningful variable names

Use it in MooTools?

Yes, that\’s right. You can use it in MooTools right now, though I don\’t think it\’s necessary since the MooTools selector engine is very good. But just like how David Walsh showed us how to use Sizzle and Peppy in MooTools, you can do the following to use Sly:

Window.implement({
    $Sly: function(selector){
        return new Sly(selector);
    }
});

// returns an array of all the anchors in the page
$Sly(\'a\').search();

// returns the first anchor on the page
$Sly(\'a\').find();

Now, you may be wondering whether doing this will allow you to use MooTools methods on the elements. Well, the good news is that you can because the MooTools Elements class applies the methods to all elements. Observe:

// returns the href of the first anchor
$Sly(\'a\').find().get(\'href\');

And lastly, Oskar Krawczyk posted how to replace the $$ function itself (thanks Oskar!):

Window.implement({
    $$: function(selector){
        return Sly.search(selector);
    }
});

Great job, Harald, great job indeed. Way to represent!