Trying to explain the differences between DHTML and DOM scripting with an example
By Christian Heilmann | March 29th, 2006 | Filed in DOM, DOM Scripting TF
A summary of the issues around DHTML, and the value behind DOM Scripting.
Skip to comment formI just published a new longer article (40 pages) trying to explain the differences between DHTML and DOM scripting. The article explains what DHTML, the DOM and DOM scripting is and shows how to create a web page with dynamic elements like tabs, a slide show and a big product shot in both ways.
Check From DHTML to DOM scripting
The DHTML explanations are annotated with details why some of the techniques are a bad idea and the DOM scripting version explains why some of the assets are good ideas.
As a summary:
DHTML issues:
1. Script dependence – Users without JavaScript get stuck or get elements that only work with JavaScript but don’t do anything for them.
2. Mixing presentation and functionality – If you want to change the look of the effect you need to hack around the JavaScript.
3. Assuming functionality without testing for it – what it says
4. Keeping maintenance JavaScript based – Maintainers are expected to change the script when they want to change the effect, and search through the whole script.
5. Mixing HTML and JavaScript – what it says
6. Blaming the user – Users get messages like “you cannot use this as your browser doesn’t support it, update your browser” instead of just not getting the functionality if it is not 100% necessary.
7. Taking over the document – one onload to rule them all
DOM scripting assets:
1. Progressive Enhancement – check if things are available, then apply those dependent on them
2. Ease of maintenance – keep the maintenance as easy as possible via dynamic CSS classes and properties at the beginning of the script
3. Separation of Presentation and Behaviour – add dynamic classes instead of changing the style collection
4. Separation of Structure and Behaviour – use dynamic event handlers and generated elements instead of onclick and NOSCRIPT
5. Using modern event handling – more than one onload please
6. Avoiding clashes with other scripts – avoid global variables and encapsulate functions as methods in an object
A lot of this is of course debate-able, but I hope it can give you a good start to distinguish between the two.