DHTML versus DOM: Comparing Both Approaches

One of the interesting debates in the community is whether to use DHTML-ish type approaches to DOM manipulation (such as innerHTML) or to use the DOM API. Christian Heilmann has written “From DHTML to DOM scripting“, a lengthy, attractive article implementing a slideshow using DHTML techniques and then demonstrating how the DOM API could be […]

One of the interesting debates in the community is whether to use DHTML-ish type approaches to DOM manipulation (such as innerHTML) or to use the DOM API. Christian Heilmann has written “From DHTML to DOM scripting“, a lengthy, attractive article implementing a slideshow using DHTML techniques and then demonstrating how the DOM API could be used to implement the same functionality. From the article:

In this article we will try to help JavaScript beginners to spot old and outdated JavaScript techniques and explain what their issues are. We do this by looking at a web page that might have been developed around the millennium with development ideas that were good at the time (DHTML), but result in inaccessible or even broken pages in today’s web environment.

If you want to take a look at the code examples offline, you can download the example site as a zip.

This article is aimed at developers who are new to JavaScript, or those who haven’t touched it in a while and wonder why people tell them off for using techniques that were the bee’s knees in 1999.

We will take a demonstration page that features three dynamic elements using JavaScript, take a look at how they were achieved, and give an example of a modern way of re-creating them more future-proof and less in the way of the visitor (DOM scripting). Let’s start with a bit of background knowledge about what DHTML and the DOM are.

While we at Ajaxian are somewhat pragmatic and tend to really love innerHTML, it’s interesting to see other perspectives.
[Source: ajaxian.com]