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
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
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 */ document.querySelectorAll(".hot"); /* * Get the currently hovered element */ document.querySelector(":hover"); /* * 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 */ document.querySelectorAll("#large:nth-child(even)");