Creating Your Own Selector Engine

Apr 23, 2010 MaXPert 9 Comments

Today we are going to do something different; this tutorial will be probably span in four parts. First two parts introducing basic mechanical stuff for traversing through the DOM nodes. Third part will cover the a basic CSS based rule engine to parse out a proper token from a given CSS selector and the finally the last part will cover merging and assembling the selector parser and the mechanical engine. Before proceeding any further into the tutorial I will like to declare that this selector engine in no sense meant to be optimum; however it’s meant to give you the idea of how things “may work”, because there can be thousands of work arounds and optimizations for the piece of code that I am writing here. So as stated before code is not meant for optimization or criticism at all. Plus this tutorial assumes you have intermediate knowledge of DOM and JS.

The basic and most fundamental piece of code that I will need throughout the whole engine will be to select all nodes under a given DOM node. But as usual different browsers handle it differently. So I am going to write a single piece of function that when passed a single DOM node selects me all the nodes under that DOM node.

Putting this piece of code in your document should allow you to select all the nodes by simply calling Selector.getAll(...) on any DOM node so,

Both should work and return you all DOM nodes. Pretty simple up-till now, basic idea is to get all nodes under a DOM node, and then filter out only the nodes we need. We will usually end up with filtering with tag types (node name) like p, a, div tags, and there properties like ID of a node, interest in class value, name and blah blah. So next I am going to write a function to give me that value of specified attribute

So now we should be able to get attribute value or null in case it doesn’t exist by doing Selector.getAttr(element, ‘attribute_name’) call; as an example:

Now that we have some basic stuff on hand for an element lets make a list of function we will be implementing in our engine, for simplicity I have selected only trivial ones and really basic ones:

  • Get all elements by particular tag name of given set of DOM nodes.
  • Get all elements by particular class name of given set of DOM nodes.
  • Get all elements by particular attribute value with given set of DOM nodes.

Everybody loves chaining and to create that chaining effect I am going to create a simple class called DOMNodes. Here is just empty prototype declaration for that:

Here constructor of DOMNodes takes array of nodes named “nodes” as input and saves that. My operations ofTags, hasClass, withAttr will simply filter the qualifying nodes from this.nodes. So lets go ahead an implement these functions:

All are pretty self descriptive descriptive, we simply iterate over the array and if the element fits criteria we create a new DomNodes wrapper with updated array and return it (so that we can chain it). So for example I want to select all the “p” tag nodes with class of “note” in it. Our code will look like this:

Pretty cool uptill now; we currently don’t have any functionality to move up and down the nodes. Now that we have some basic structure, we can build a more complicated organism. In next tutorial I will cover some of these treversal functionalities. Stay tuned for more!

About the author: MaXPert

Expert & Freelancer in PHP, MYSQL, Javascript, including many frameworks like codeigniter, cakephp, mootools, jquery, prototype js and a long list.