Tutorial :Best way to find DOM elements with css selectors


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 ).


These days, doing this kind of stuff without a library is madness. However, I assume you want to learn how this stuff works. I would suggest you look into the source of jQuery or one of the other javascript libraries.

With that in mind, the selector function has to include a lot of if/else/else if or switch case statements in order to handle all the different selectors. Example:

function select( selector ) {   if(selector.indexOf('.') > 0) //this might be a css class     return document.getElementsByClassName(selector);   else if(selector.indexOf('#') > 0) // this might be an id     return document.getElementById(selector);   else //this might be a tag name     return document.getElementsByTagName(selector);   //this is not taking all the different cases into account, but you get the idea.  };  


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)");  


Creating a selector engine is no easy task. I would suggest learning from what already exists:

  • Sizzle (Created by Resig, used in jQuery)
  • Peppy (Created by James Donaghue)
  • Sly (Created by Harald Kirschner)


Here is a nice snippet i've used some times. Its really small and neat. It has support for the all common css selectors.



No there's no built in way. Essentially, if you decide to go without jQuery, you'll be replicating a buggy version of it in your code.

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »