After looking at XPath and how it can be used to quickly traverse the document tree, I also thought I’d take a look at the W3C Selectors API as it kind of falls in that same line. At this point, it none of the major browsers support it. However, any WebKit build (Safari’s engine) since February 7th supports it, and it looks like IE8 will be supporting it as well. I’d be eager to hear if anyone knows where Opera and Firefox stand on getting it going here in the future.
The querySelector method as defined by the W3C returns the first element matching the selector, or if no matching element is found, it returns a null value.
The querySelectorAll method returns a StaticNodeList of all elements matching the selector, or if no matching elements were found, it returns a null value. For anyone familiar with DOM traversal, you are probably familiar with NodeLists. NodeLists are returned by methods like getElementsByTagName. The main difference between the StaticNodeList and a NodeList, is that if you remove an element from the document, a NodeList is also affected and therefore the indexes of the NodeList are altered. A StaticNodeList, however, is not affected…hence the Static part.
The querySelector and querySelector methods are very easily used:
//returns all elements with an error class
//returns the first paragraph with an error class
//returns every other row of a table with an id of data
In addition to calling the methods with a single selector, you can also pass groups of selectors seperated by commas, like so:
` The first line above would return all elements with a class or error or a class of warning. The second line would return the first element with a class of either error or warning.