Use the Document Object Model to Future-Proof your Web Site


The Document Object Model (DOM) is an important strategy for sticking to Web standards and for limiting the use of JavaScript on your site.

There are three things that contribute to a Web page. These are:

  • Content
  • Presentation
  • Behavior

Content is contained by the site's HTML, or, if it is a future-proofed site, by the site's XHTML.

The presentation of the content (how it looks, and where it is placed on the page) is controlled by Cascading Style Sheets (CSS).

The behavior is controlled by the Document Object Model (DOM).

So why not just use JavaScript?

  • Because some people turn JavaScript off
  • Because some people have not installed or downloaded the plug in required to use JavaScript
  • Because some developers stick the JavaScript in the HTML where it doesn't belong

Visitors don't like to be slowed down by having to load a plug in before they can use your site.

Sites that aggravate visitors tend to have shorter life cycles. A short life cycle is the opposite of being future-proofed.

Using XHTML and CSS are two of the three components of Web Standards. The third component is the DOM.

The Behavior Layer

JavaScript has been around since 1996 (since Netscape Navigator(TM) 2. But, JavaScript was used for some nasty tricks and earned a clouded reputation. The problem uses:

  • Pop Up Windows
  • Changing the dimensions of the Web browser
  • Other annoying tricks

Future-proofed sites can use JavaScript, but in a kinder, gentler way.

Keep JavaScript to a minimum, and make sure that the effects that you employ are subtle and delicate. You should strive to ensure that the JavaScript enhances the visitor's experience in a way that the visitor doesn't notice it's use.

JavaScript that exists to show off neat tricks that the developer can do looses the point. The point is that site visitors don't care about “dog and pony show” effects. Visitors want easy to get to, solid information, delivered fast. Cute programming, for the sake of the programming, is off target (and ticks off its target audience).

A second recommendation for using JavaScript is to place the script in a separate .js file, instead of embedding it in the HTML. This is called “unobtrusive” JavaScript.

DOM Methods

Finding Nodes
getElementById
getElementByTagName
getAttribute
Creating Nodes
createElement
cloneNode
setAttribute
Inserting Nodes
insertBefore
appendChild

DOM Properties

Navigating Nodes
parentNode
firstChild
lastChild
previousSibling
nexSibling
Node Properties
nodeName
nodeType
nodeValue

DHTML and DOM Scripting

DHTML was a failed attempt for browser domination by browser vendors at the end of the last century. (Sounds like a long time ago, and it is a long time in “Web time.”) :-)

DHTML stands for Dynamic HTML was supposed to use JavaScript to update CSS so that dramatic, dynamic effects could be created.

This strategy works only as far as the browsers of all your visitors are the same (such as an Intranet). But, in real life, the using DHTML is the opposite of future-proofing.

The reason for the failure is that to use DHTML with a wide audience, it is necessary to use code to check for browser type and version (browser sniffing); and it is necessary to create a maze of code forks to handle the “What Ifs” encountered by the proprietary code of the various browsers.

DHTML is an idea whose time has definitely past, a dead idea that will not be remembered fondly, an idea that no one will miss.

Online examples of DOM Scripting include:

Links to information about other Technologies on this site.