Below you find the contents of the W3C DOM section of my site.
| Level 1 DOM | 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. |
| W3C DOM mailing list | As it says |
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; incom |
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 |
| W3C DOM vs. innerHTML | 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. |
| style vs. className | Test script to find the fastest way to change the style of elements: by changing its style
properties or its className. |
| 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 | Incom |
|
| 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 |
| Script | Explorer 5 Windows | Explorer 6 Windows | Explorer 5.2 Mac | Mozilla 1.6 | Safari 1.3 | Opera 8 |
|---|---|---|---|---|---|---|
| Yes | Buggy | Crash | Yes | Yes | Incom |
|
| 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. |
||||||
| Incom |
Incom |
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 |