Best way to find DOM elements with css selectors

Question

What's the easiest way to find Dom elements with a css selector, without using a library?

function select( selector ) {  return [ /* some magic here please :) */ ] };  select('body')[0] // body;  select('.foo' ) // [div,td,div,a]  select('a[rel=ajax]') // [a,a,a,a] 

This question is purely academical. I'm interested in learning how this is implemented and what the 'snags' are. What would the expected behavior of this function be? ( return array, or return first Dom element, etc ).

Answer 1

In addition to the custom hacks, in recent browsers you can use the native methods defined in the W3C Selectors API Level 1, namely document.querySelector() and document.querySelectorAll():

var cells = document.querySelectorAll("#score > tbody > tr > td:nth-of-type(2)");