If you are doing any significant web development, you probably need some level of interactivity on the site. In some cases, this means doing a bunch of AJAX calls to do work. In other cases, you may need to manipulate the document that people are looking at. This means you need to get familiar with the Document Object Model (DOM), and you need to know how to work with it. The DOM is fairly basic and can be reviewed at W3Schools. Working with the DOM is much more interesting. Because basic JavaScript is fairly limited in what you can do with the DOM, libraries have been developed to simplify things.

Prototype And JQuery

Two of the more popular and low-level JavaScript frameworks are Prototype and JQuery. I call them low-level because they are the core libraries that allow you to manipulate the DOM. Other libraries have been created to work on top of them, like Scriptaculous for Prototype, and there are higher level abstractions like ExtJS and YUI. While these high level abstractions are really useful, sometimes you just need to know the basics to get something done. In Prototype and JQuery, the most basic thing to learn is the selection of elements from the DOM.

Prototype and JQuery allow for selection of HTML elements using CSS selector rules. For generic CSS selectors, you need to use the $$() method in Prototype, while JQuery uses the $() method for all selection. In general, CSS selectors give you the power to select almost anything in an HTML document.

Introduction to CSS Selectors

As I said, CSS selectors give you the ability to select almost anything in an HTML document. These ideas come from the CSS specification, and apply to your stylesheets as well. However, you typically do not have very complicated expressions in a stylesheet. However, you could create some fairly complex expressions when looking at your HTML. DZone has a refcard for JQuery selectors that has a nice overview of this as well.

The simplest selection is using the id or class of an element. For an id, you prepend a “#” to the id text in order to select the element. Remember that an HTML id is supposed to be unique in the document. For a CSS class, you prepend a “.” to the class name. For CSS classes you can typically get a list or array of HTML elements. You must review the documentation for the library that you are currently using. Some libraries always return an array, others may return an array or an element if there is only one.

Just like CSS, you can combine the selectors with HTML elements. If you want all of the divs in a document for a class, say “sidebarWidget”, you create the following expression:

$('div.sidebarWidget');

You can also chain these expressions together. If you wanted to collect all of the links in these sidebar widgets that have a class of “external”, you would use:

$('div.sidebarWidget a.external);

If you work with a lot of HTML forms, you can also take advantage of the selectors. You will see this often if you work with form fields and AJAX-based data transfer. Most of the time, you may be able to use whatever shortcut method your library contains to get the values of input fields. Sometimes, you need a little more control. Often this happens with radio buttons. So, this example looks for a radio button that is named “elementType” and is checked, using the Prototype $$ method:

$$('input:checked[type="radio"][name="elementType"]')[0].value

This is a lot different than the other examples. First, there is the use of the pseudo-class :checked. This can be used like other CSS pseudo-classes, like :hover, :active, etc. The other pieces are attribute selectors, i.e. [type=”radio”] returns input elements of type radio. Obviously, the other attribute selector filters this list further by selecting elements with a name of “elementType”. The array reference is needed because the Prototype $$ method always returns an array.

As you can see, the spacing used in these expressions is very important. When you have a space like the previous examples, you are chaining selector expressions together, or providing a selection context. When there is no spacing, you are creating one big selector.

Admittedly, this is not a thorough introduction, but if you look at your library documentation, the DZone documentation or any CSS tutorial, you will find examples of almost any CSS selector you can think of. You can also start small with a simple selector and slowly add more rules to create something more complex.