Article
Rough Guide to the DOM
Rough Guide To The DOM - Part 1
The Current State Of Denmark
In Shakespeare's "Hamlet", one of the characters famously remarks, "Something's rotten in the state of Denmark". And each time I sit down to code some dHTML, I'm assailed by a sense of wonder at his perspicuity. That comment, laden with an undertone of doom, is such a perfect appraisal of the numerous incompatibilities between the two major browsers, and the problems they cause for developers on a daily basis, that it's hard not to laugh. And I would... if I wasn't already weeping buckets.
These incompatibilities are particularly glaring in an area known as the DOM, or Document Object Model, a standard method of accessing each and every element in the document, together with its attributes. When a primitive version of the DOM was first introduced, developers immediately realized how useful it could be in adding new levels of interactivity to a static Web page. However, as the two major browsers branched out in different directions, developing DOM constructs that were mutually incompatible, that elation quickly turned to disappointment - after all, no developer likes writing different versions of the same script for different browsers.
Of course, all is not lost. Efforts have been under way, most noticeably at the W3C to establish common standards for all browsers. The release of the CSS specification, and then of the DOM Level 0 and Level 1 specifications, has resulted in most of the major browsers falling in line with the proposed standards. The flip side: since a standard is now available, browser makers will soon stop supporting their previous DOM versions... which means that all the code you wrote and the clever workarounds you devised will no longer work in newer versions of the browsers.
You can already see this happening - code written specifically for Netscape 4.x no longer works in Netscape 6.x, which is built on the Mozilla engine - and so, every developer needs to understand the new DOM standard and its impact on dHTML code development.
Over the next few pages, I'll be illustrating some of the new DOM constructs, together with examples of how they can be used in "real" HTML documents. My trusty steed in this journey will be Mozilla, the wonderful open-source browser available at http://www.mozilla.org/, which claims to be the most standards-compatible browser currently available.
Before we start, a few disclaimers.
One, this tutorial is not meant to be an exhaustive reference to the DOM - you can buy a book for that. It is merely a guide to help you in making the transition to the new object model.
Second, I don't claim to be an expert on the DOM, and much of the material in this tutorial is based on my own experience as a developer.
Finally, as new DOM standards are proposed and disposed, the material here may become invalid; you should always refer to the most current standard or recommendation at http://www.w3.org/DOM/ for up-to-date information (this is one of my favourite documents - I use it frequently when I have trouble sleeping).
With the formalities out of the way, let's get started.
Back To Basics
We'll start with the basics - a very simple HTML page.
<html>
<head></head>
<body bgcolor="white">
<div id="a" style="font-family: Arial; color: white;
background: black">Wassup?</div>
</body>
</html>
Let's alter the font colour of the text within the <div>. In Internet Explorer, this would typically be accomplished with
<script language="JavaScript">
document.all.a.style.color = "red";
</script>
Here's the code I would use in Mozilla:
<script language="JavaScript">
var obj = document.childNodes[0].childNodes[1].childNodes[0];
obj.style.color = "red";
</script>
An explanation is in order here. Under the new DOM, every element in an HTML document is part of a "tree", and you can access each and every element by navigating through the tree "branches" until you reach the corresponding "node". Given that, here's my representation of the HTML document above, in "tree" form.
document
| -- <html>
| -- <head>
| -- <body>
| -- <div>
Now, to get to the <div>, I need to:
- start at the top ("
document"); - move down to the main branch - the
<html>tag, or "document.childNodes[0]"; - then to the second sub-branch - the
<body>tag or "document.childNodes[0].childNodes[1]"; - then to the
<div>- "document.childNodes[0].childNodes[1].childNodes[0]";
At this point, I have successfully navigated my way to the <div> element in the document tree. A quick way of verifying this is to use an alert() on the object
<script language="JavaScript">
var obj = document.childNodes[0].childNodes[1].childNodes[0];
alert(obj.nodeName);
obj.style.color = "red";
</script>
which displays the name of the tag - DIV - in an alert box.
At this point, I can begin futzing with object attributes - in the example above, I've altered the "color" style attribute. Don't worry about this for the moment; simply verify that you have understood the manner in which I navigated through the document tree to reach the DIV.
Copyright Melonfire, 2000. All rights reserved.