querySelector and querySelectorAll

A familiar and unpleasant sight in web applications is fragile code traversing the DOM to get to certain elements or collections of elements. Chains of getElementById("something").parent.parent are all too common, hurting both readability and flexibility. As a result, many javascript libraries have implemented functions to use the powerful CSS selector system to look up DOM nodes.

Continuing the trend of standardizing and speeding up commonly used functionality from these libraries, WebKit now has support for the new W3C Selectors API, which consists of the querySelector and querySelectorAll methods. Hopefully libraries will begin to adopt this new functionality to provide performance improvements while remaining compatible with older browsers.

Some examples of how it could be used:

   * Get all the elements with class "hot" (duplicating getElementsByClassName)
   * A common use for this is as a toggle; 
   * for example, a search feature might tag results with a class
   * Get the currently hovered element
   * Get every other element in the <li> with id "large"
   * This is mostly useful for doing "zebra stripe" alternating rows. 
   * Once CSS3 becomes more widespread, doing this directly via CSS will be more practical

What would a new API like this be without benchmarks? The mootools project has conveniently created a wonderful test and benchmark suite for just this sort of functionality. A version of it that has been modified to test querySelectorAll as well as three common javascript libraries is available at http://webkit.org/perf/slickspeed/. Please note that many of the tests will only work in a build of WebKit from February 7th or later.