What is it?
What does it look like?
The following example would select all p elements in the document that have a class of either “error” or “warning”.
var alerts = document.querySelectorAll("p.warning, p.error");
(Example above taken from the API Examples)
I’ve created a demo that shows this example in action. It uses the classList property so don’t try this in IE.
In addition to querySelectorAll, we can use querySelector which returns only the first descendant element. Also, querySelector is not restricted to CSS IDs and Classes – you can use this with HTML5 elements as well:
Um…What About Browser Support?
QuerySelector and querySelectorAll are supported by all the major browsers from IE8 and up. Of course you need to be careful which CSS selectors you are querying because not all browser versions recognize all selectors.
Should I care?
Poke around inside jQuery and you’ll find references to querySelector – looks like jQuery is using this native API too (when it can). So, if you’re already using jQuery in your project and you’re more comfortable with jQuery selectors this new API isn’t going to rock your world. If you’re not using jQuery, are not worried about old pre-IE8 browsers and are trying to keep your project super-lightweight then these new selectors will make your coding much easier. So it looks like it is up to you and your situation.