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


Solution:1

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.  };  


Solution:2

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


Solution:3

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)


Solution:4

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

http://www.openjs.com/scripts/dom/css_selector/


Solution:5

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
Previous
Next Post »