Web DevCenter
oreilly.comSafari Books Online.Conferences.
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript

Web Topics
All Articles
Scripting Languages

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab

Dynamic Content with DOM-2 (Part II of II)

by Scott Andrew LePera and Apple Developer Connection

In Part I we introduced portions of the Document Object Model (DOM), which provides a scriptable interface for a document structure. With the DOM, an HTML document is described as a series of nodes, each node representing an object in the document, including all text, tags, comments, and other data. Altering these nodes through JavaScript, a developer can alter the visual display of the page in a browser. If you read the last article you know how to use DOM methods to create, insert, and remove elements and text nodes from the page.

This article dives a little deeper into the JavaScript node interface and examines the different ways of altering the visible properties of an element or text node. You'll first learn how to alter element attributes with DOM element methods, then you'll see how to change an element's style properties through the DOM Level 2 (DOM2) Style specification interface.

Getting an Element Reference

Before you use the DOM interface to manipulate element nodes, you will need to get a reference to the element with which you want to work. By "reference" I mean a variable that points to the correct object in the page. You may already be familiar with document.images, document.forms, and other collections available in most browsers. These collections are groups of references to objects within the page. If you needed a reference to an image with the NAME attribute of imgHeader, you could use the images collection to grab the correct element by its name:

var img = document.images["imgHeader"];

However, these collections are only available to a subset of a page's elements. For example, there is no document.tables or document.paragraphs collection that allows you to get references to those classes of elements.

Fortunately, the DOM2 interface provides two methods to help get a hold of any element (and hold onto it tightly -- believe me, elements can be slippery). These two methods are:

  • document.getElementById(string id): returns a reference to the element with the specified ID.

  • document.getElementsByTagName(string tagName): returns a collection (array) of all elements of the specified tag name.

Thus, to get a reference to a table element with an ID of "tableMain", you could use the following line of JavaScript:

var table = document.getElementById("tableMain");

The variable table should now contain a reference to the appropriate table. getElementById() assumes the element in question has an ID attribute to match against. If no element with a matching ID is found, getElementById returns a null value.

It's important to realize that the NAME attribute of an element is not the same as its ID. For example, if you're in the habit of assigning NAME attributes to your image tags, you cannot access them with getElementById unless you also include an ID attribute. It's perfectly fine to have elements with identical NAME and ID values.

getElementsByTagName() is useful for situations where you need references to all elements of a particular type. This method returns a collection containing a reference to each matching element it finds. For example, if you we wanted to count the number of table cells in the page, you could use something like the following code:

var allTDs = document.getElementsByTagName("td");
alert("# of table cells: " + allTDs.length);

Try it out. Click the button below to use getElementsByTagName() to count the number of table cells in this page.

To get a particular element reference in the collection, use the collection's item() method, which returns a reference to the element at the specified index. If you wanted to get a reference to the first and last table cells in the collection, you could use this:

var allTDs = document.getElementsByTagName("td");
var firstTD = allTDs.item(0).id;
var lastTD = allTDs.item(allTDs.length-1).id;
var str = "# of table cells: " + allTDs.length + "\n";
str += "First TD: " + firstTD + "\n";
str += "Last TD: " + lastTD;

Previously in this series:

Dynamic Content with DOM-2 (Part I of II)

Comment on this articleIs DOM-2 supported by enough browsers for you to begin using its functionality? Or will you continue to rely on other tools for dynamic content?
Post your comments

The advantage of using item() instead of directly referencing the slot in the collection is that item() returns a null value if the index supplied is invalid or the element in question is not within the collection. This is often more desirable than the error message you might get when referencing a nonexistent slot in the collection.

getElementsByTagName() is also a method of every element, which means you can retrieve a collection of references to all elements within a particular element. The following code uses getElementsByTagName() at the element level to retrieve references to all images within a table:

var table = document.getElementById("myTable");
var imgs = table.getElementsByTagName("img");

Once you have an element reference, you can manipulate its properties.

Pages: 1, 2, 3

Next Pagearrow