W3C DOM Compatibility - Core

This table was last changed on 28 August 2005. It has been replaced by a newer version.

If you'd like to have some practical examples of what you can do with the W3C DOM, read my book ppk on JavaScript, especially chapter 8.

These old compatibility tables detail support for the W3C DOM Core Level 1 and 2 modules in all modern browsers.

On this page I grouped the various W3C DOM methods and properties in eight tables. Basically you must know the first four tables by heart and you'll rarely need the second four tables.

1. The Four Methods with which the W3C DOM starts. Creating and finding HTML elements.
2. Node information. Once you found a node you need more information about it.
3. Walking the DOM tree. How to go from one node to another.
4. Node manipulation. How to move nodes through the document.
5. Microsoft extensions to Level 1 DOM Core. Generally not interesting.
6. Manipulating data. Data is always text, and there are some specialized methods for dealing with it.
7. Manipulating attributes. Terrible browser incompatibilities.
8. Miscellaneous methods and properties. You'll rarely need one of them.

The Four Methods

First of all the Four Methods. The average W3C DOM script uses them all. The first two methods allow you to create element nodes and text nodes. Later you insert these newly created nodes into the document.

The second two methods are for finding elements in the page. You can either find a single one, identified by an id, or all tags of one type.

You must know these methods by heart.

Node information

These four properties give basic information about all nodes. What they return depends on the node type. They are read-only, except for nodeValue.

There are three basic node types: element nodes (HTML tags), attribute nodes and text nodes. I test these properties for all these three types and added a fourth node type: the document node (the root of all other nodes).

You must know these properties by heart.

if (x.nodeName == 'SPAN')

The DOM tree

Five properties and two arrays for walking through the DOM tree. Using these properties, you can reach nodes that are close to the current node in the document structure.

In general you shouldn't use too many of these properties. As soon as you're doing something like

x.parentNode.firstChild.nextSibling.children[2]

your code is too complicated. Complex relationships between nodes can suddenly and unexpectedly change when you alter the document structure, and altering the document structure is the point of the W3C DOM. In general you should use only one or two of these properties per action.

You must know these properties by heart.

Node manipulation

These five methods allow you to restructure the document. The average DOM script uses at least two of these methods.

The changes in the document structure are applied immediately, the whole DOM tree is altered. The browser, too, will immediately show the changes.

You must know these methods by heart.

Microsoft extensions

As usual Microsoft has extended the standard somewhat. Though sometimes its extensions are brilliant (innerHTML springs to mind), in the case of the DOM Core they aren't.

Note the difference between W3C and Microsoft methods. The W3C methods are owned by the parent element of the node you want to adjust, the Microsoft methods by the node itself.

Data

These methods are for manipulating text data. Note the difference between a text node and text data: the text node is a node and contains the data in its nodeValue. The methods below only work with this contained data.

Attributes

A bloody mess. Try influencing attributes in this order:

1. Try getting or setting a specific property, like x.id or y.onclick.
2. If there is no specific property, use getAttribute() or setAttribute().
3. If even that doesn't work, try any other method or property in the table below. Most have horrible browser incompatibility patterns, though.
4. Avoid attributes[]. It's worse than anything else.

Note

• In my view any method or property concerning attribute nodes should also work on the style attribute, event handlers and custom attributes. If not I judge the method or property incomplete.

z = document.createAttribute('title');
z.value = 'Test title';
x.setAttributeNode(z)

Miscellaneous

A lot of miscellaneous methods and properties that you'll rarely need. I use only two of them in an actual script.