Introduction to JavaScript / Interacting with Web browsers: the Document Object Model

What is the DOM?

The Document Object Model is:

A hierarchical representation of all of the elements of a Web page
A collection of objects with associated properties, methods and values that can be manipulated with JavaScript

Code Examples

document.location.href
document.images[0].src
document.getElementsByTagName("h3").style.color
window.close()

The bad old days: Netscape 4 and the browser wars

In June of 1996, Netscape introduced the first beta version of Netscape 4. At the time, Netscape and Microsoft were still battling it out for dominance in the market so there was intense pressure to update the software with the latest whiz-bang features. Unfortunately for a generation of Web designers, Netscape guessed wrong about which elements of the nascent specifications were going to make it into the final version. Netscape 4 has been the bane of Web designers ever since due to its proprietary DOM and abysmal support of Cascading Stylesheets (CSS).

Shortly thereafter, Microsoft introduced Internet Explorer 4.0 and another proprietary DOM along with it. At least IE supported CSS pretty well and their DOM enabled designers to more easily give users a dynamic browsing experience.

[return to top]

Code Examples

// Netscape 4
document.layers

// Internet Explorer 4
document.all

The good new days: modern browsers and standards

Fast forward to July of 2003. Netscape 4 has a global market share of around 1% (this figure is higher at GW due to the legacy Netscape Calendar system). Internet Explorer 5.0 and above (which do a pretty good job of standards compliance) account for over 93% of global users.

“Great!” you say, “The browser wars are over. Let’s all code for IE!” Not so fast … The same thing that happened to Netscape could happen to Internet Explorer. This is why it is important to code for standards rather than browsers.

Standards-friendly Browsers

Windows

Macintosh

[return to top]

Code Examples

// modern browsers
document.getElementById()
document.getElementsByTagName()

The modern DOM

What did we learn above? The DOM is both:

A hierarchical representation of all of the elements of a Web page, and…
A collection of objects with associated properties, methods and values that can be manipulated with JavaScript

The DOM as hierarchy

Consider the following HTML snippet:

<table>
<tr>
   <td></td>
   <td></td>
</tr>
<tr>
   <td></td>
   <td></td>
   <td></td>
</tr>
</table>

The DOM sees this as a hierarchy of elements as represented in the following diagram:

Diagram showing tree structure of table code

The DOM as collections

Consider the following HTML snippet:

<body>
<img name="prods" src="products.gif" width="100" height="10" alt="Products"><br>
<img name="servs" src="services.gif" width="100" height="10" alt="Services"><br>
<img name="about" src="aboutus.gif"  width="100" height="10" alt="About Us"><br>
<img name="contc" src="contact.gif"  width="100" height="10" alt="Contact Us"><br>
</body>

The DOM organizes the images in the HTML above into an images collection (like an array). In this way, we can reference the individual images either by their number in the array or by their name as in the following example:

document.images[0]       // this is the object corresponding to the first image
document.images.0        // this is another way to represent the same image
document.images["about"] // we can also reference images by name

As we learned before, objects have properties and properties have values. Many of these values can be changed using JavaScript. This is what allows us, for example, to change an image when a user passes her mouse over it.

<a href="products.html"
   onmouseover="document.images.prods.src='images/products_active.gif'"
   onmouseout="document.images.prods.src='images/products.gif'">
   <img name="prods" src="images/products.gif" width="100" height="10" alt="Products">
</a>

[return to top]

Browser detection versus object detection

There are so many browsers out there (and so many that pretend to be a browser they’re not!) that it takes literally hundreds of lines of code to narrow down exactly which one a particular user is using. But, there is a better way!

One handy byproduct of the browser wars is that it left a fairly dependable trail of broken DOMs to use as a basis for determining what browser the user is using. (Of course, we wouldn’t have to bother figuring this out if all browsers were standards compliant!)

Using a technique called object detection, we can reliably determine the capabilities of a particular configuration in just a few lines of code.

A common example of this is to check for the document.images collection before starting an image rollover script. This helps prevent JavaScript errors from occurring. The following is an example of this technique:

function swapImage(imgName,imgSrc)
{
   if (document.images)
   {
      document.images[imgName].src = imgSrc;
   }
}

[return to top]

Code Examples

nn4    = false; // netscape 4.x
ie4    = false; // internet explorer 4.x
ie5up  = false; // internet explorer 5.0 and above
modern = false; // other modern browsers

if (document.layers)                          nn4=true;
if (document.all && !document.getElementById) ie4=true;
if (document.all && document.getElementById)  ie5up=true;
if (document.getElementById)                  modern=true;

if (modern == true)
{
   // do standards compliant stuff
}
else
{
   // do other stuff
}

Are you ready for another quiz? I thought so!

Introduction to JavaScript

Interacting with Web browsers: the Document Object Model

Sections

What is the DOM?

Code Examples

The bad old days: Netscape 4 and the browser wars

Code Examples

The good new days: modern browsers and standards

Windows

Macintosh

Code Examples

The modern DOM

The DOM as hierarchy

The DOM as collections

Browser detection versus object detection

Code Examples