i am dustin diaz

Yahoo UI gets a selector engine

This is something that I knew was in the works for quite a time having discussed this with Matt Sweeney while I was still at Yahoo!, but today it finally happened. YUI got a CSS selector engine. Two words guys: Freakin' wicked!.

Really, this is great news

Although some might find it contradictory that I still use Yahoo code on Google projects (mainly prototyping), adding the selector engine has been long overdue and I'm glad it's finally made it's way to the public. Previously for any querying work I use to use Jack's DOM Query which is a lightweight CSS/XPath selector engine. But now I'm glad Yahoo has stepped up and home-brewed their own that will fit nicely into the rest of the YUI framework (c'mon guys, we have to call it a framework now). Making queries is as easy as:

CSS Query with YUI

var elements = YAHOO.util.Selector.query("#content p.hello");

Or if you're anything like me:

CSS Query with YUI shorthands

var Y = YAHOO.util,

    Select = Y.Selector;

var elements = Select.query("#content p.hello");

The new Selector namespace also includes two other static methods, filter, and test, each of which allow you to match elements with a selector. The way filter works is that you can pass in an arbitrary collection of elements, and test it against a supplied selector like such:

Selector.filter

<div id="example">

  <ul>

    <li class="hello">hello</li>

    <li class="world">world</li>

  </ul>

</div>



<script>

var Y = YAHOO.util,

    Select = Y.Selector;

var elements = document.getElementsByTagName('li');

var filtered = Select.filter(elements, "#example li.hello");

// filtered === ([li.hello] HTMLElement)

</script>

In contrast, Selector.test allows you to pass in a node (either HTML element reference, or a string representing an ID), and test it against a selector; returning a boolean as such:

Selector.test

<div id="example">

  <ul>

    <li id="hello">hello</li>

    <li id="world">world</li>

  </ul>

</div>



<script>

  var hello = document.getElementById('hello');

  var isHelloMatch = Selector.test(hello, "#example li"); // true

  var isWorldMatch = Selector.test('world', "#example ul"); // false

</script>

Other notes to take into consideration

Albeit it appears they left out the ability to apply a function against a collection, such as what you can do with the DOM Collection utility, you can still use the DOM collection interface to batch your selector collection against a method as such:

Dom.batch with Queries

var Y = YAHOO.util,

    Select = Y.Selector,

    Dom = Y.Dom;

var collection = Select.query("#example p > span[lang^=us]");

Dom.batch(collection, function(el) {

  // do stuff with 'el'...

});

This of course requires you to loop through a live list twice. It would be nice to see if we can get the apply (just like it is in DOM) back into the Selector API so we can do stuff like this:

applying methods against collections

var collection = Select.query("#example p > span[lang^=us]", null, null, 

  function(el) {

    // do stuff with 'el'

  }

);

// and I'll still have the reference to 'collection' in case I want

// to use it at a later time

. For a full look at the new Selector API, check out the Selector API documents on YDN. Also, see the related blog post about the recent 2.4 release. They've got some other cool bits on JSON support, charts, a profiler, and an updated script/css getter.

Congratulations on this release guys. You did a great job.