Christian Heilmann

New free article – From DHTML to DOM scripting

Wednesday, March 29th, 2006 at 5:55 pm

I 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.

The DHTML explanation is annotated with explanations 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

Of course, you can disagree :-)

Share on Mastodon (needs instance)

Share on Twitter

Newsletter

Check out the Dev Digest Newsletter I write every week for WeAreDevelopers. Latest issues:

160: Graphs and RAGs explained and VS Code extension hacks Graphs and RAG explained, how AI is reshaping UI and work, how to efficiently use Cursor, VS Code extensions security issues.
159: AI pipelines, 10x faster TypeScript, How to interview How to use LLMs to help you write code and how much electricity does that use? Is your API secure? 10x faster TypeScript thanks to Go!
158: 🕹️ Super Mario AI 🔑 API keys in LLMs 🤙🏾 Vibe Coding Why is AI playing Super Mario? How is hallucinating the least of our worries and what are rules for developing Safety Critical Code?
157: CUDA in Python, Gemini Code Assist and back-dooring LLMs We met with a CUDA expert from NVIDIA about the future of hardware, we look at how AI fails and how to play pong on 140 browser tabs.
156: Enterprise dead, all about Bluesky and React moves on! Learn about Bluesky as a platform, how to build a React App and how to speed up SQL. And play an impossible game in the browser.

My other work: