Site Contents
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:
- Flickr™ (Opens in its own window)
- Google Maps™(Opens in its own window)
- Free Online O'Reily Book Chapter about the DOM (Opens in its own window)
Links to information about other Technologies on this site.