• Choose a category
• All
• Classic-Fiction

We've had enough theory for now; let's look at the interface to the HTML that the DOM gives us.

ROCKSTAR TIP

But first, a word about compatibility . . . because remember, not all browsers support everything. We're going to be looking at a limited set of DOM functionality in this book, but there will still be some stuff that's not supported everywhere. So, rule of thumb: if I don't mentioned browser support, assume the functionality is supported in the following browsers

Internet Explorer 6+

Firefox 3+

Opera 10+

Safari 4+

Chrome 5+

I think it's fairly safe to assume that site visitors on Firefox, Opera, Chrome, and Safari will be using a recent version of the browser. If there's an issue with one of the above browsers, I'll point that out and try to give a solution.

Often, you'll want to find one or more elements and so something with them. There are a couple of ways to do this.

By Id

Most of the time, you'll want to get a single element with a given id. Here's the way we do it:

Example 5.1

console.log( document.getElementById("id_name") );

Pretty much every interaction with the DOM starts with the document object. Here, we're calling the getElementById method, and passing it a single string parameter: the id of the object we want to find. If the method finds the element in the DOM, it will return it. If not, it will return null.

By Class

If you want to get a group of elements, there are probably two things these elements have in common: the class name, or the HTML tag name (not always, but often). Hence, we can find elements based on those criteria, too. Try this:

Example 5.2

console.log( document.getElementsByClassName("warning") );

Pretty obvious name, right? However, now the discrepancies start. Internet Explorer 6, 7, and 8 don't have the document.getElementByClassName function. Although this is unfortunate, this is actually where JavaScript shines: it's relatively easy (if you're familiar with the cross-browser DOM idiosyncrasies) to create your own getElementsByClassName function. You can find the different ways to do it and how their speeds compare in an article by John Resig. With your current knowledge, you might have a bit of trouble understanding the code, but give it a try. At the very least, you can copy it and use it in your projects.

By Tag Name

If you want to get all the elements with the same tag, you can probably guess what to use:

Example 5.3

console.log( document.getElementsByTagName("p") );

Predictable, well-supported; nothing to dislike here.

Traversing the DOM

Most often, you'll get your elements via one of the above functions, do what you want to do to then and move on. However, occasionally you'll want to get a node and work with other nodes close to it. For example, You might have something like this:

You'll have, say, a dozen or so of these on a given page. Let's say you want to sort the products alphabetically by name. To do this, you'll need to get the h2 elements. However you'll also have other h2s on the page. This means you need to get all the divs with a class "product," and then find the h2 within each. This requires some DOM traversal skills.

Before we continue with out scenario, let's go back to that idea of a node tree. Trees are actually a very important part of computer science. You know that for a tree to be a tree, there have to be links between parent nodes and child nodes; these are one-way links. It's inefficient to have a link from the parent node to every child node; so instead, trees have a link from every parent node to its first child node. Then, every child node has a link to it's next sibling.

The DOM works exactly this way: every node has a link to its first child and its next sibling; it also has a link to its parent node. That means our HTML snippet above looks like this:

Fig. 5-2. DOM Tree snippet

Now let's move back to our scenario. With the theory we've just learned, we can see that what we need to do is find