Home arrow DHTML arrow Rough Guide To The DOM (part 1)

Rough Guide To The DOM (part 1)

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.

TABLE OF CONTENTS:
  1. Rough Guide To The DOM (part 1)
  2. Back To Basics
  3. Navigating The Family Tree
  4. What's In A Name?
  5. Ducks In A Row
  6. Changing Things Around
  7. Alternatives
  8. Shazam!
By: Vikram Vaswani, (c) Melonfire
Rating: starstarstarstarstar / 10
April 09, 2001

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement
In Shakespeare's "Hamlet", one of the characters famously remarks,"Something's rotten in the state of Denmark". And each time I sit down tocode some dHTML, I'm assailed by a sense of wonder at his perspicuity. Thatcomment, laden with an undertone of doom, is such a perfect appraisal ofthe numerous incompatibilities between the two major browsers, and theproblems they cause for developers on a daily basis, that it's hard not tolaugh. And I would...if I wasn't already weeping buckets.

These incompatibilities are particularly glaring in an area known as theDOM, or Document Object Model, a standard method of accessing each andevery element in the document, together with its attributes. When aprimitive version of the DOM was first introduced, developers immediatelyrealized how useful it could be in adding new levels of interactivity to astatic Web page. However, as the two major browsers branched out indifferent directions, developing DOM constructs that were mutuallyincompatible, that elation quickly turned to disappointment - after all, nodeveloper likes writing different versions of the same script for differentbrowsers.

Of course, all is not lost. Efforts have been under way, most noticeably atthe W3C [http://www.w3.org/] to establish common standards for allbrowsers. The release of the CSS specification, and then of the DOM Level 0and Level 1 specifications, has resulted in most of the major browsersfalling in line with the proposed standards. The flip side: since astandard is now available, browser makers will soon stop supporting theirprevious DOM versions...which means that all the code you wrote and theclever workarounds you devised will no longer work in newer versions of thebrowsers.

You can already see this happening - code written specifically for Netscape4.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 itsimpact on dHTML code development.

Over the next few pages, I'll be illustrating some of the new DOMconstructs, together with examples of how they can be used in "real" HTMLdocuments. My trusty steed in this journey will be Mozilla, the wonderfulopen-source browser available at http://www.mozilla.org/, which claims tobe 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 thetransition to the new object model.

Second, I don't claim to be an expert on the DOM, and much of the materialin this tutorial is based on my own experience as a developer.

Finally, as new DOM standards are proposed and disposed, the material heremay become invalid; you should always refer to the most current standard orrecommendation at http://www.w3.org/DOM/ for up-to-date information (thisis one of my favourite documents - I use it frequently when I have troublesleeping.)

With the formalities out of the way, let's get started.

 
 
>>> More DHTML Articles          >>> More By Vikram Vaswani, (c) Melonfire
 

blog comments powered by Disqus
   

DHTML ARTICLES

- Google Gives Buckyball a Tribute Doodle in H...
- Rough Guide To The DOM (part 2)
- Rough Guide To The DOM (part 1)
- Filters And Transitions In IE5
- Understanding Embedded Fonts

Developer Shed Affiliates

 



© 2003-2013 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap

Dev Shed Tutorial Topics: