JavaScript tutorial - W3C DOM introduction

Navigation

Skip navigation.

Site search

Site navigation

JavaScript tutorial

Printing

Other tutorials

W3C DOM introduction

This part of the tutorial steps beyond the limits of the older browsers, and will cover the much more advanced abilities of the current browsers.

Thanks to PP:K for linking to this page from his Digital Web article about the W3C DOM. He refers to this as a 'less technical introduction' to the W3C DOM. I am happy with that description, not only because the 'technical introduction' is a 239 page PDF of incredible detail, but because I don't see why the DOM should be that technical. It is designed to be intuitive and easy to use, so that is how I will teach it. Of course there are some incredibly advanced and complex things you can do with the DOM, but with web pages, there is almost never the need to do them. So, instead of going into 239 pages of information on how to convert the planet Earth into a DOM tree, I will give you a gentle introduction to the fundamentals of the DOM, and show you how to achieve the results you need, with the minimum of fuss.

The W3C DOM, commonly known as 'The DOM' or the 'DOM level 1(/2/3)', provides a more realistic and more versatile way of looking at the structure of HTML documents (as well as XML and other document formats). It views HTML documents as a tree structure of elements and text embedded within other elements. All HTML elements, as well as the text they contain and their attributes can be referenced by walking through the DOM tree, their contents can be modified or deleted, and new elements can be created for subsequent insertion into the DOM tree. HTML elements, the text they contain, and their attributes are all known as nodes.

The DOM is designed to interact with more programming languages than just JavaScript, but as this is a JavaScript tutorial (in case you didn't notice...), and most browsers only support JavaScript, I will only describe how to use JavaScript to interact with it.

The DOM is the present and future of browsers, and no doubt it will become the only supported technique for both basic and advanced DHTML in the future.

The W3C DOM is supported by 5th generation browsers. These currently include:

For more details of these browsers, and to download them, please see my list of '4th+ generation' browsers.

This list makes it clear that Internet Explorer 4, Netscape 4, Escape 4, Opera 4, 5 and 6, Omniweb 4.2- and WebTV all do not support the W3C DOM. These browsers are no longer in common use, and can be safely ignored. You may want to check that a browser supports the W3C DOM before you attempt to use it. Note that Opera 4-6 also supports many of the basic functions of the W3C DOM, but cannot actually use most of them. iCab 2- cannot perform advanced W3C DOM functions. Therefore, the best test for W3C DOM support that I can find is this:

if( document.getElementById && document.childNodes && document.createElement ) {
  //do something that requires it
}

Of all the current major browsers, Internet Explorer's DOM support is by far the worst of all. IE 8- for Windows supports half of the DOM 1 modules, and parts of a few DOM 2 modules. The Mac version supports slightly more of DOM 1. IE 9+ supports most of DOM 1 and 2, and a few basic DOM 3 modules, but only if the document triggers standards rendering mode. In quirks mode, IE 9+ reverts to its crippled old version of DOM, and since many scripts will need to work in both modes, they will need to allow for this, and restrict themselves to using only the parts IE supports, or has alternatives for.

Opera, Mozilla/Firefox and Safari/Chrome are competing for first place, with complete DOM 1 support, complete or almost complete DOM 2 support, and a small amount of DOM 3 support. iCab 3 has partial DOM 1 and DOM 2. Opera 9+ is the first and currently only browser to support all DOM 1 and 2 features well enough to claim support for all of them (as well as a number of DOM 3 modules). Safari/Chrome also claims support for all DOM 1 and 2 features, but its DOM 2 Style Sheets and CSS implementation is so bad it should not be allowed to claim support for them at all.

This tutorial will concentrate on things that will work in all these browsers, since they are the most common browsers currently in use, and will show how to bridge the gap to allow Internet Explorer's non-standard features to be used as a partial replacement for missing parts of important DOM features.

ICEbrowser has largely complete DOM 1 and partial DOM 2 (it also claims some DOM 3, but my tests cannot support its claims, especially since it is missing large parts of DOM 2 that it claims to support). It will cope with most of the things I will cover in this tutorial.

Escape 5 can handle enough DOM to reference elements and their styles, and can move them through the document. However, as soon as you try anything more than that (walking the DOM tree, creating new elements, changing their contents, checking for the existence of a childNodes collection, etc.), it produces script errors, and fails to use try...catch correctly, so the errors cannot be avoided. In this state, it is unusable, and it can't even handle many basic DHTML scripts either. Just ignore it. It is hardly used by anyone, and has been abandoned by the vendor.

NetFront has recently added DOM support and it is still very immature. Generally versions earlier than 3.4 will produce errors or crash, and as a result, should be ignored as DOM browsers. Version 3.4 usually performs better.

PP:K maintains many DOM 1 tutorials as well as the ever helpful DOM compatibility tables. Although the DOM provides many more methods, properties and collections than I have shown here, most are not reliable enough to use, so I will only talk you through those that are. If you intend to use other properties or methods, you should check if the browser supports them first using:

if( node.propertyCollectionOrMethodName ) {
  //do something that requires it
}

Last modified: 19 March 2011

  1. Previous
  2. Next
This site was created by Mark "Tarquin" Wilton-Jones.
Don't click this link unless you want to be banned from our site.