In HTML code, anything that’s not contained between angled brackets will be interpreted as a text node in the DOM. Structurally, text nodes are treated almost exactly like element nodes: they sit in the same tree structure and can be reached just like element nodes; however, they cannot have children.

If we reconsider the HTML example we saw earlier, and include the text nodes in our visualization of the DOM, it becomes a lot bigger, as Figure 3.3 illustrates.

Figure 3.3. The complete DOM tree, including text nodes

Although those text nodes all look fairly similar, each node has its own value, which stores the actual text that the node represents. So the value of the text node inside the title element in this example would be “DOMinating JavaScript.”

With tags and text covered by element and text nodes, the only pieces of information that remain to be accounted for in the DOM are attributes. At first glance, attributes would appear to be part of an element—and they are, in a way—but they still occupy their own type of nodes, handily called attribute nodes.

Any of the three anchor elements in the example DOM we saw earlier could be visualized as shown in Figure 3.4 with the element’s attribute nodes.

Figure 3.4. The href and rel attributes represented as attribute nodes in the DOM

Attribute nodes are always attached to an element node, but they don’t fit into the structure of the DOM like element and text nodes do—they’re not counted as children of the element they’re attached to. Because of this, we use different functions to work with attribute nodes—we’ll discuss those functions later in the chapter.

As you can see from the diagrams presented here, the DOM quickly becomes complex—even with a simple document—so you’ll need some powerful ways to identify and manipulate the parts you want. That’s what we’ll be looking at next.

The most direct path to an element is via its id attribute. id is an optional HTML attribute that can be added to any element on the page, but each ID you use has to be unique within that document:

<p id="uniqueElement">
  …
</p>

If you set out to find an element by ID, you’ll need to make one big assumption: that the element you want has an ID. Sometimes, this assumption will mean that you need to massage your HTML code ahead of time, to make sure that the required element has an ID; at other times, that ID will naturally appear in the HTML (as part of the document’s semantic structure). But once an element does have an ID, it becomes particularly easy for JavaScript to find.

If you wanted to reference a particular element by ID in CSS, you’d use an ID selector beginning with #:

#uniqueElement(1)
{
  color: blue;(2)
}

Roughly translated, that CSS says:

CSS is quite a succinct language. JavaScript is not. So, to reference an element by ID in JavaScript, we use the getElementById method, which is available only from the document node. It takes a string as an argument, then finds the element that has that string as its ID. I like to think of getElementById as a sniper that can pick out one element at a time—highly targeted. For instance, imagine that our document included this HTML:

<h1>
  Sniper (1993)
</h1>
<p>
  In this cinema masterpiece,
  <a id="berenger" href="/name/nm0000297/">Tom Berenger</a> plays
  a US soldier working in the Panamanian jungle.
</p>

We can obtain a reference to the HTML element with the ID berenger, irrespective of what type of element it is:

var target = document.getElementById("berenger");

The variable target will now reference the DOM node for the anchor element around Tom Berenger’s name. But let’s suppose that the ID was moved onto another element:

<h1 id="berenger">
  Sniper (1993)
</h1>
<p>
  In this cinema masterpiece,
  <a href="/name/nm0000297/">Tom Berenger</a> plays a US soldier
  working in the Panamanian jungle.
</p>

Now, if we execute the same JavaScript code, our target would reference the h1 element.

Once you have a reference to an element node, you can use lots of native methods and properties on it to gain information about the element, or modify its contents. You’ll explore a lot of these methods and properties as you progress through this book.

If you’d like to try to get some information about the element we just found, you can access one or more of the element node’s native properties. One such property is nodeName, which tells you the exact tag name of the node you’re referencing. To display the tag name of the element captured by getElementById, you could run this code:

var target = document.getElementById("berenger");
alert(target.nodeName);

An alert dialog will pop up displaying the tag name, as shown in Figure 3.5.

Figure 3.5. Displaying an element’s tag name using the nodeName property

If an element with the particular ID you’re looking for doesn’t exist, getElementById won’t return a reference to a node—instead, it will return the value null. null is a special value that usually indicates some type of error. Essentially, it indicates the absence of an object when one might normally be expected.

If you’re not sure that your document will contain an element with the particular ID you’re looking for, it’s safest to check that getElementById actually returns a node object, because performing most operations on a null value will cause your program to report an error and stop running. You can perform this check easily using a conditional statement that verifies that the reference returned from getElementById isn’t null:

var target = document.getElementById("berenger");

if (target != null)
{
  alert(target.nodeName);
}

Using IDs to locate elements is excellent if you want to modify one element at a time, but if you want to find a group of elements, getElementsByTagName is the method for you.

Its equivalent in CSS would be the element type selector:

li
{
  color: blue;
}

Unlike getElementById, getElementsByTagName can be executed as a method of any element node, but it’s most commonly called on the document node.

Take a look at this document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
  <head>
    <title>Tag Name Locator</title>
    <meta http-equiv="Content-Type"
        content="text/html; charset=utf-8" />
  </head>
  <body>
    <p>
      There are 3 different types of element in this body:
    </p>
    <ul>
      <li>
        paragraph
      </li>
      <li>
        unordered list
      </li>
      <li>
        list item
      </li>
    </ul>
  </body>
</html>

We can retrieve all these list item elements using one line of JavaScript:

var listItems = document.getElementsByTagName("li");

By executing that code, you’re telling your program to search through all of the descendants of the document node, get all the nodes with a tag name of "li", and assign that group to the listItems variable.

listItems ends up containing a collection of nodes called a node list. A node list is a JavaScript object that contains a list of node objects in source order. In the example we just saw, all the nodes in the node list have a tag name of "li".

Node lists behave a lot like arrays, which we saw in Chapter 2, although they lack some of the useful methods that arrays provide. In general, however, you can treat them the same way. Since getElementsByTagName always returns a node list in source order, we know that the second node in the list will actually be the second node in the HTML source, so to reference it you would use the index 1 (remember, the first index in an array is 0):

var listItems = document.getElementsByTagName("li");
var secondItem = listItems[1];

secondItem would now be a reference to the list item containing the text “unordered list.”

Node lists also have a length property, so you can retrieve the number of nodes in a collection by referencing its length:

var listItems = document.getElementsByTagName("li");
var numItems = listItems.length;

Given that the document contained three list items, numItems will be 3.

The fact that a node list is referenced similarly to an array means that it’s easy to use a loop to perform the same task on each of the nodes in the list. If we wanted to check that getElementsByTagName only returned elements with the same tag name, we could output the tag name of each of the nodes using a for loop:

var listItems = document.getElementsByTagName("li");

for (var i = 0; i < listItems.length; i++)
{
  alert(listItems[i].nodeName);
}

Unlike getElementById, getElementsByTagName will return a node list even if no elements matched the supplied tag name. The length of this node list will be 0. This means it’s safe to use statements that check the length of the node list, as in the loop above, but it’s not safe to directly reference an index in the list without first checking the length to make sure that the index will be valid. Looping through the node list using its length property as part of the loop condition is usually the best way to do this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
  <head>
    <title>Tag Name Locator</title>
    <meta http-equiv="Content-Type"
        content="text/html; charset=utf-8" />
  </head>
  <body>
    <p>
      There are 3 different types of element in this body:
    </p>
    <ul>
      <li>
        paragraph
      </li>
      <li>
        unordered list
      </li>
      <li>
        list item
      </li>
    </ul>
    <p>
      There are 2 children of html:
    </p>
    <ul>
      <li>
        head
      </li>
      <li>
        body
      </li>
    </ul>
  </body>
</html>

var lists = document.getElementsByTagName("ul");
var secondList = lists[1];
var secondListItems = secondList.getElementsByTagName("li");

It’s quite often very handy to find elements based on a class rather than a tag name. Although we’re stuck with the same 91 HTML elements wherever we go, we can readily customize our classes to create easily referenced groups of elements that suit our purposes.

Compared to searching by tag name, using a class as a selector can be a more granular way to find elements (as it lets you get a subset of a particular tag name group) as well as a broader way to find elements (as it lets you select a group of elements that have a range of tag names).

Unfortunately, no built-in DOM function lets you get elements by class, so I think it’s time we created our first real function! Once that’s done, we can add the function to our custom JavaScript library and call it whenever we want to get all elements with a particular class.

var elementArray = [];

if (typeof document.all != "undefined")
{
  elementArray = document.all;
}
else
{
  elementArray = document.getElementsByTagName("*");
}

var pattern = new RegExp("(^| )" + theClass + "( |$)");

for (var i = 0; i < elementArray.length; i++)
{
  if (pattern.test(elementArray[i].className))
  {
    …
  }
}

if (elementArray[i].className == theClass) // this won't work

<div class="article summary clicked">

var matchedArray = [];
var pattern = new RegExp("(^| )" + theClass + "( |$)");

for (var i = 0; i < elementArray.length; i++)
{
  if (pattern.test(elementArray[i].className))
  {
    matchedArray[matchedArray.length] = elementArray[i];
  }
}

Core.getElementsByClass = function(theClass)
{
  var elementArray = [];

  if (typeof document.all != "undefined")
  {
    elementArray = document.all;
  }
  else
  {
    elementArray = document.getElementsByTagName("*");
  }

  var matchedArray = [];
  var pattern = new RegExp("(^| )" + theClass + "( |$)");

  for (var i = 0; i < elementArray.length; i++)
  {
    if (pattern.test(elementArray[i].className))
    {
      matchedArray[matchedArray.length] = elementArray[i];
    }
  }

  return matchedArray;
};

var elementArray = Core.getElementsByClass("dataTable");

The methods for finding DOM elements that I’ve described so far have been fairly targeted—we’re jumping straight to a particular node in the tree without worrying about the connections in between.

This works fine when there’s some distinguishing feature about the element in question that allows us to identify it: an ID, a tag name, or a class. But what if you want to get an element on the basis of its relationship with the nodes that surround it? For instance, if we have a list item node and want to retrieve its parent ul, how do we do that? For that matter, how do we get the next item in the list?

For each node in the tree, the DOM specifies a number of properties, and it’s these properties that allow us to move around the tree one step at a time. Where document.getElementById and its ilk are like direct map references (“go to S37° 47.75’, E144° 59.01’”), these DOM properties are like giving directions: “turn left onto the Bayshore Freeway and a right onto Amphitheater Parkway.” Some people call this process walking the DOM.

<p>
  <a id="oliver" href="/oliver/">Oliver Twist</a>
</p>

var oliver = document.getElementById("oliver");
var paragraph = oliver.parentNode;

<ul id="baldwins">
  <li>
    Alec
  </li>
  <li>
    Daniel
  </li>
  <li>
    William
  </li>
  <li>
    Stephen
  </li>
</ul>

var baldwins = document.getElementById("baldwins");
var william = baldwins.childNodes[2];

var alec = baldwins.firstChild;

var stephen = baldwins.lastChild;

Finding Siblings

As well as moving up and down the DOM tree, we can move from side to side by getting the next or previous node on the same level. The properties we use to do so are nextSibling and previousSibling.

If we continued on from the example we saw a moment ago, we could get to the “Stephen” list item from “William” using nextSibling:

var stephen = william.nextSibling;

We could get to the “Daniel” list item using previousSibling:

var daniel = william.previousSibling;

If we’re at the last node on a level, and try to get the nextSibling, the property will be null. Similarly, if we’re at the first node on a level and try to get previousSibling, that property will also be null. You should check to make sure you have a valid node reference whenever you use either of these properties.

Figure 3.6 provides a clear visualization of where each of these DOM-walking properties will get you to from a given node in the DOM tree.

Figure 3.6. Moving around the DOM tree using the element node’s DOM properties

As I mentioned when we discussed the structure of the DOM, attributes are localized to the elements they’re associated with—they don’t have much relevance in the larger scheme of things. Therefore, we don’t have DOM functions that will let you find a particular attribute node, or all attributes with a certain value.

Attributes are more focused on reading and modifying the data related to an element. As such, the DOM only offers two methods related to attributes, and both of them can only be used once you have an element reference.

<a id="koko" href="http://www.koko.org/">Let's all hug Koko</a>

var koko = document.getElementById("koko");
var kokoHref = koko.getAttribute("href");

var koko = document.getElementById("koko");
var kokoId = koko.getAttribute("id");

var koko = document.getElementById("koko");
var kokoHref = koko.href;

var koko = document.getElementById("koko");
koko.setAttribute("href", "/koko/");

var koko = document.getElementById("koko");
koko.setAttribute("title", "Web site of the Gorilla Foundation");

<a id="koko" href="http://www.koko.org/"
    title="Web site of the Gorilla Foundation">Let's all hug
  Koko</a>

In the world of CSS, it’s considered bad practice to use inline styles to style an element’s appearance. Equally, in JavaScript it’s considered bad practice to use the style property as a means of styling an element’s appearance.

As we discussed in Chapter 1, you want to keep the layers separated, so HTML shouldn’t include style information, and JavaScript shouldn’t include style information.

The best way to change an element’s appearance with JavaScript is to change its class. This approach has several advantages:

Most of the time, changes to an element’s appearance can be defined as distinct changes to its state, as described in its class. It’s these state changes that you should be controlling through JavaScript, not specific properties of its appearance.

The only situation in which it’s okay to use the style property arises when you need to calculate a CSS value on the fly. This often occurs when you’re moving objects around the screen (for instance, to follow the cursor), or when you animate a particular property, such as in the “yellow fade” technique (which changes an element’s background-color by increments).

Core.hasClass = function(target, theClass)
{
  var pattern = new RegExp("(^| )" + theClass + "( |$)");

  if (pattern.test(target.className))
  {
    return true;
  }

  return false;
};

var scarlet = document.getElementById("scarlet");

if (Core.hasClass(scarlet, "clicked"))
{
  …
}

Core.addClass = function(target, theClass)
{
  if (!Core.hasClass(target, theClass))
  {
    if (target.className == "")
    {
      target.className = theClass;
    }
    else
    {
      target.className += " " + theClass;
    }
  }
};

var body = document.getElementsByTagName("body")[0];
Core.addClass(body, "unreadable");

.unreadable
{
  background-image: url(polka_dots.gif);
  background-position: 15px 15px;
  color: #FFFFFF;
}

Removing a Class

When we want to remove a class from an element, we use that same regular expression (it’s a pretty handy one, huh?), but with a slightly different twist:

core.js (excerpt)

Core.removeClass = function(target, theClass)
{
  var pattern = new RegExp("(^| )" + theClass + "( |$)");

  target.className = target.className.replace(pattern, "$1");
  target.className = target.className.replace(/ $/, "");
};

In Core.removeClass, instead of using the regular expression to check whether or not the target element has the class, we assume that it does have the class, and instead use the regular expression to replace the class with an empty string, effectively removing it from className.

To do this, we use a built-in string method called replace. This method takes a regular expression and a replacement string, then replaces the occurrences that match the regular expression with the replacement string. In this case, we’re using an empty string as the replacement, so any matches will be erased. If the class exists inside className, it will disappear.

Figure 3.9. The page before we start work

Figure 3.10. The display after we change the class of the body element

The second call to replace just tidies up className, removing any extraneous spaces that might be hanging around after the class was removed (some browsers will choke if any spaces are present at the start of className). Since we assign both these operations back to className, the target element’s class will be updated with the changes straight away, and we can return from the function without fuss.

This first step’s pretty simple, since we did most of the related work mid-chapter. We don’t want to apply striping to every table in the document (just in case someone’s been naughty and used one for layout), so we’ll apply it only to the tables marked with a class of dataTable. To do this, all we have to do is dust off Core.getElementsByClass—it will be able to go and find all the dataTable elements:

var tables = Core.getElementsByClass("dataTable");

Done. You can’t beat your own custom library!

<script type="text/javascript" src="core.js"></script>
<script type="text/javascript" src="stripy_tables.js">
</script>

There’s that phrase “for each” again. Inside the variable tables we have the collection of tables waiting to be striped—we just need to iterate through each of them using a for loop.

Every time we move through the for loop, we’ll want to get the rows for that particular table. This sounds okay, but it’s not that simple. Let’s look at the markup for a nicely semantic and accessible table:

<table class="dataTable">
  <thead>
    <tr>
      <th scope="col">
        Web Luminary
      </th>
      <th scope="col">
        Height
      </th>
      <th scope="col">
        Hobbies
      </th>
      <th scope="col">
        Digs microformats?
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        John Allsopp
      </td>
      <td class="number">
        6’1”
      </td>
      <td>
        Surf lifesaving, skateboarding, b-boying
      </td>
      <td class="yesno">
        <img src="tick.gif" alt="Yes" />
      </td>
    </tr>
    …
  </tbody>
</table>

There’s one row in there that we don’t want to be susceptible to striping—the row inside the thead.

To avoid affecting this row through our row striping shenanigans, we need to get only the rows that are inside a tbody. This means we must add a step to our code—we need to get all of the tbody elements in the table (HTML allows more than one to exist), then get all the rows inside each tbody. This process will actually require two for loops—one to step through each of the table elements in the document, and another inside that to step through each of the tbody elements—but that’s fine; it just means more work for the computer. Since the variable name i is used for the counter in the outer for loop, we’ll name the counter variable in our inner for loop j:

for (var i = 0; i < tables.length; i++)
{
  var tbodys = tables[i].getElementsByTagName("tbody");

  for (var j = 0; j < tbodys.length; j++)
  {
    var rows = tbodys[j].getElementsByTagName("tr");
    …
  }
}

The results for both uses of getElementsByTagName in the code above will be limited to the current table, because we’re using it as a method of a particular element, not the entire document. The variable rows now contains a collection of all the tr elements that exist inside a tbody element of the current table.

“For every” is equivalent to “for each” here, so we know that we’re going to use yet another for loop. It will be a slightly different for loop though, because we only want to modify every second row.

To do this, we’ll start the counter on the second index of the collection and increment it by two, not one:

for (var i = 0; i < tables.length; i++)
{
  var tbodys = tables[i].getElementsByTagName("tbody");

  for (var j = 0; j < tbodys.length; j++)
  {
    var rows = tbodys[j].getElementsByTagName("tr");

    for (var k = 1; k < rows.length; k += 2)
    {
      Core.addClass(rows[k], "alt");
    }
  }
}

We’re already using the variables i and j as the counters for the outer for loops, and we don’t want to overwrite their values, so we create a new counter variable called k. k starts at 1 (the second index), and for every execution of this inner loop we increase its value by 2.

The conditional code for this inner loop is just one line that uses our pre-rolled Core.addClass function to add the class alt to the current row. Once the inner for loop finishes, every second row will be marked with this class, and once the outer for loops finish, every data table will be stripy.

The main code for our function is now complete; we just have to wrap it inside a self-contained object:

var StripyTables =
{
  init: function()
  {
    var tables = Core.getElementsByClass("dataTable");

    for (var i = 0; i < tables.length; i++)
    {
      var tbodys = tables[i].getElementsByTagName("tbody");

      for (var j = 0; j < tbodys.length; j++)
      {
        var rows = tbodys[j].getElementsByTagName("tr");

        for (var k = 1; k < rows.length; k += 2)
        {
          Core.addClass(rows[k], "alt");
        }
      }
    }
  }
};

Kick-start it when the page loads, using Core.start:

Core.start(StripyTables);

Now, whenever you include this script file (and the Core library) on your page, StripyTables will go into action to automatically stripe all your tables:

Figure 3.11. Hard-to-scan table content without stripes

Figure 3.12. Using a script to produce stripy tables and improve the usability of the document

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
  <head>
    <title>Stripy Tables</title>
    <meta http-equiv="Content-Type"
        content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css"
        href="stripy_tables.css" />
    <script type="text/javascript" src="core.js"></script>
    <script type="text/javascript"
        src="stripy_tables.js"></script>

You can style the alt class however you want with a simple CSS rule:

tr.alt
{
  background-color: #EEEEEE;
}

You can turn a plain, hard-to-follow table like the one in Figure 3.11 into something that’s much more usable—like that pictured in Figure 3.12—with very little effort.

This type of script is a great example of progressive enhancement. Users who browse with JavaScript disabled will still be able to access the table perfectly well; however, the script provides a nice improvement for those who can run it.

Prototype was one of the first libraries to swap the painful-to-type document.getElementById for the ultra-compact $.

The $ function in Prototype not only acts as a direct substitute for document.getElementById, it also expands upon it. You can get a reference to a single element by ID, so this normal code:

var money = document.getElementById("money");

would become:

var money = $("money");

But you don’t have to stop at getting just one element; you can specify a whole list of element IDs that you want, and $ will return them all as part of an array. So this normal code:

var elementArray = [];
elementArray[0] = document.getElementById("kroner");
elementArray[1] = document.getElementById("dollar");
elementArray[2] = document.getElementById("yen");

becomes considerably shorter:

var elementArray = $("kroner", "dollar", "yen");

Earlier in this chapter we created our own library function to get elements by class. Prototype has a similar function, which is slightly more powerful. It creates an extension to the document node, called getElementsByClassName. Like our function Core.getElementsByClass, this method allows us to retrieve an array of elements that have a particular class:

var tables = document.getElementsByClassName("dataTable");

It also takes an optional second argument, which allows us to specify a parent element under which to search. Only elements that are descendants of the specified element, and have a particular class, will be included in the array:

var tables =
    document.getElementsByClassName("dataTable", $("content"));

The variable tables will now be an array containing elements that are descendants of the element with ID content, and that have a class of dataTable.

Prototype also replicates all of the class functions that we created for our own library. These functions take exactly the same arguments that ours did, but the functions themselves are methods of Prototype’s Element object. So Prototype offers Element.hasClassName, Element.addClassName, and Element.removeClassName:

var body = document.getElementsByTagName("body")[0];
Element.addClassName(body, "unreadable");

if (Element.hasClassName(body, "unreadable"))
{
  Element.removeClassName(body, "unreadable");
}

jQuery was one of the first libraries to support an entirely different way of finding elements with JavaScript: it allows us to find groups of elements using CSS selectors.

The main function in jQuery is also called $, but because it uses CSS selectors, this function is much more powerful than Prototype’s version, and manages to roll a number of Prototype’s functions into one.^[14]

If you wanted to use jQuery to get an element by ID, you’d type the following:

var money = $("#money");

# indicates an ID selector in CSS, so $("#money") is the equivalent of typing document.getElementById("money").

To get a group of elements by tag name, you’d pass $ a CSS element type selector:

var paragraphs = $("p");

And to get a group of elements by class, you’d use a class selector:

var tables = $(".dataTable");

And, as with CSS, you can combine all these simple selector types in, say, a descendant selector:

var tables = $("#content table.dataTable");

tables is now an array of table elements that are descendants of the element with ID content, and that have a class of dataTable.

The CSS rule parsing in jQuery is really quite spectacular, and it supports the majority of selectors from CSS1, CSS2, and CSS3, as well as XPath.^[15] This makes it possible for us to use selectors like this:

var complex = $("form > fieldset:only-child input[@type=radio]");

Once you break it down, that query finds all radio button input elements inside fieldsets that are direct children of form elements, but only where the fieldset is the only child of the form. Phew!

Dojo follows the previous two libraries closely in how they deal with the DOM.

It has its own shortcut to document.getElementById, but it doesn’t expand upon the DOM’s native functionality:

var money = dojo.byId("money");

It also has its own getElementsByClass function inside the html module:

var tables = dojo.html.getElementsByClass("dataTable");

This function allows you to get elements by class under a particular parent:

var tables = dojo.html.getElementsByClass("dataTable",
    dojo.byId("content"));

For completeness, it has the usual class handling functions, which take the same form as our own Core functions:

var body = document.getElementsByTagName("body")[0];
dojo.html.addClass(body, "unreadable");

if (dojo.html.hasClass(body, "unreadable"))
{
  dojo.html.removeClass(body, "unreadable");
}