Rough Guide To The DOM (part 1) (
Page 1 of 8 )
It's the bane of Web developers everywhere - conflicting standards, browser incompatibilities, and code that changes every time a new browser version hits the Web. But fear not - charging in on a white steed comes a heroic knight, clad in the attire of the new W3C DOM and armed with the tools to make this nightmare end forever. Read on to find out how the new DOM finally brings some standards to the decidedly non-standard world of the Web.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 [http://www.w3.org/] 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.
/ 10 
