This article first appeared in issue 1 of Treehouse magazine.
Web standards are on the rise. The new standards-based approach to building websites is fundamentally different to the old-fashioned techniques of using tables and single-pixel transparent .gifs for layout. Instead, clued-up web designers are approaching documents on the Web in terms of layers of enhancement. Begin with well marked-up content, then add CSS for presentation and DOM Scripting for behaviour. This separation of structure, presentation and behaviour is a central tenet of standards-based web design.
The presentation layer has been the focus of most activity in recent years. CSS has really taken off which, in some ways, is surprising. Don’t get me wrong - CSS is a marvellous technology. The problem lies with browser support. There is a considerable gulf between the specifications for CSS and the implementation of those specs in the most popular web browsers.
Compared to CSS, DOM Scripting has been largely ignored. This is also surprising given that the gulf between the specs and the implementations are very narrow indeed. But it wasn’t always like this.
When Netscape and Microsoft released version 4 of their browsers, they promised a world of possibilities. But what they delivered was a crushing disappointment.
A new buzzword was coined: DHTML. In theory, Dynamic HTML would allow developers to create richer web pages filled with movement and interactivity. This would be achieved by using a new, expanded DOM to update the styles of a page element on the fly.
There were two problems with DHTML (apart from its confusing name). Firstly, CSS support was lousy in both browsers. Secondly, each browser used its own proprietary Document Object Model.
Suppose you wanted to find a <div> with the ID "bar" and assign it to a variable, foo. In NN4, you would have to write:
var foo = document.layers["bar"];
IE4 meanwhile, required this syntax:
var foo = document.all["bar"];
var foo = document.getElementByid("bar");
At first glance, this appears to be little better than the proprietary DOMs. However, the W3C DOM goes much, much further. It allows you to manipulate any node in a document. That means that as well as manipulating elements, you can also create, modify and destroy attributes and text. It isn’t limited to HTML either. The W3C states:
"The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents."
The refusal by Netscape and Microsoft to implement the standardised DOM was one indignity too many in the already vicious browser wars of the late nineties. The browser makers’ disregard for the W3C DOM led directly to the creation of the Web Standards Project.
Whether through the efforts of the WaSP or as a result of internal soul searching, Netscape and Microsoft began to implement the W3C’s recommendations. But the damage was already done.
And here’s the curious thing: while our backs were turned, the dream of cross-browser DOM support became a reality. Sure, there are still inconsistencies from browser to browser, but for the most part, nearly every major browser supports the core DOM functionality. Compare that to the situation with CSS. Years after the technology was first implemented, browser support is still the number one headache for any CSS developer.