Table of contents

Below you find the contents of the W3C DOM section of my site.

General

An introduction to the Level 1 DOM and its many possibilities. The DOM treee, nodes, how to change them and how to create and delete them.
As it says

Compatibility tables

See also the key to my compatibility tables.

Module Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.3 Opera 8
Core
Node manipulation

Tables
Yes Yes Yes Yes Yes Yes
The W3C DOM Core module defines how to access, read and manipulate an XML document. Well-formed HTML documents are XML documents, so these methods and properties can be used to completely rewrite any HTML page, if you so wish.

Here you find details on how to find elements, how to create new ones, how to read out node information and how to change the structure of the document.
HTML
HTML tag manipulation

Tables
Yes Yes Yes Yes Yes Yes
Though HTML documents are XML documents, they have a number of special features that the average XML document doesn't have. The W3C DOM HTML module defines these special cases and how to deal with them.

Here you find details on getting and setting properties of HTML elements, such as className or id. The innerHTML property is of prime importance to any DOM script.
CSS
Stylesheet manipulation

Tables
Yes Yes Read only Yes Read only No
Style sheets are part of the document, too (sort of). The W3C DOM CSS module gives access to style sheets and some browsers even allow you to change a style sheet. Where traditional DHTML changes only the styles of specially selected elements, these new methods allow you to change the styles of an entire page. Two lines of code suffice to make all paragraphs on your page red instead of black, for instance.

This module contains some browser incompatibilities, but they are of the cute kind. W3C and Microsoft define some different methods and arrays, but some simple object detection allows you to evade these problems.
Events
Event manipulation

Tables
Microsoft Microsoft Mainly Microsoft W3C Mainly W3C; incomplete Both
The W3C DOM Events module specifies how events are being handled. The MS DOM events module does the same, but in a different way. These tables detail both Event modules and also Netscape 4's old system.

See the Introduction to events and subsequent pages for more information.
Module Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.3 Opera 8

Benchmarks

Test script to see which method of writing large amounts of content into a page is fastest. I use some pure W3C DOM scripts and some scripts that mess with innerHTML.
Test script to find the fastest way to change the style of elements: by changing its style properties or its className.

Scripts

Script Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.3 Opera 8
Yes Yes No Yes No No
Example script how to load an XML document into your HTML page and create a table to display the data. In my opinion this will become important in the future, as soon as we can save XML documents back to the server.
Yes Yes Almost Yes Yes Incomplete
How to let the user click on a paragraph and let him edit its text in an input box. When the user is ready, the text becomes paragraph again.
This is a very useful script for content management systems. The only flaw is that there is no simple way to send the revised texts to the server.
Script Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.3 Opera 8
Yes Yes Yes Yes No Yes
How to get the default styles of HTML elements. For instance, a paragraph gets a percentual width from a general style sheet. How wide is the paragraph?
Doesn't work perfectly yet, but you can read out some interesting information.
Yes Yes Yes Yes Yes No
This script changes an entire style sheet, so that you can, for instance, change the text colour of all your paragraphs with just a few lines of code.
Unfortunately there are very grave browser incompatibilities that make this technique badly usable for the moment.
Yes Yes Crash Yes Yes Yes
How to generate a Table of Contents based on the headers in the page. I use this script on every page of my site.
Yes Yes Yes Yes Yes Yes
The Fahrner Image Replacement is very fashionable these days. It tries to replace a header text by an image by means of CSS. Unfortunately the countless variations on this theme make invalid assumptions about screen readers. Besides, I feel CSS is the wrong tool for image replacement. Instead we should use JavaScript. This script.
5.5 Yes Yes Yes Yes Yes
This script gives an example of CSS enhancement through minimal JavaScript interference. It's only an example, it's not yet good enough to use in real pages.
Yes Yes Yes Yes Yes Yes
This script adds a maximum length to a textarea and warns the user when he exceeds this maximum length.
Yes Yes Yes Yes No Yes
A custom script for getting elements by several tag names in the order they appear in the document. For instance:
var headerList = getElementsByTagNames('h1,h2,h3,h4');
Script Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.3 Opera 8

Forms

Script Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.3 Opera 8
Yes Buggy Crash Yes Yes Incomplete
How to show and hide form fields based on user actions.
For once the explanation of the script is not on my site. I published the companion Forms, usability, and the W3C DOM article on Digital Web Magazine.

The script works in Explorer 6 Windows, but this browser may hide other page elements.
Incomplete Incomplete Buggy Yes Yes Yes
Example script for the way the W3C DOM is going to change the interaction of web sites. In this example the user can choose how many form fields he'd like to see. We web developers don't have to decide on a maximum number any more, the user is completely free to do as he likes.
Yes Yes Danger Yes Yes Yes
How to write error messages next to the form field they apply to. This is clearly better than using alerts to show errors.
The example script works in Explorer Mac, but this browser may fail spectacularly when you insert the script in a real web page.
5.5 Yes No Yes Yes No
Can almost be done in pure CSS, but I prefer JavaScript.
Script Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.3 Opera 8