The Document Object Model (DOM) is the model that describes how all elements in an HTML page,
like input fields, images, paragraphs etc., are related to the topmost structure: the document itself.
By calling the element by its proper DOM name, we can influence it.

On this page I give an introduction to the W3C Level 1 DOM that has been implemented
in the newest generation of browsers. It will give you an overview of how the DOM works and what
you can do with it.

First some words about the
DOM Recommendation and the purpose of the DOM, then I teach you what
nodes are and how you can
walk the DOM tree from node to node. Then it's time to learn how to
get a specific node and how to
change its value or attributes. Finally, I'll teach you how to
create nodes yourself, the ultimate purpose of the new DOM.

The Recommendation

The Level 1 DOM Recommendation has been developed by the W3C to provide any programming
language with access to each part of an XML document. As long as you use the methods and properties
that are part of the recommendation, it doesn't matter if you parse an XML document with VBScript, Perl
or JavaScript. In each language you can read out whatever you like and make changes to the XML document
itself.

As some of you might have guessed, this paragraph describes an ideal situation and
differences (between browsers, for instance) do exist. Generally, however, they're far smaller than
usual so that learning to use the W3C DOM in JavaScript will help you to learn using it in another
programming language.

In a way HTML pages can be considered as XML documents. Therefore the Level 1 DOM
will work fine on an HTML document, as long as the browser can handle the necessary scripts.

You can read out the text and attributes of every HTML tag in your document, you can delete tags and
their content, you can even create new tags and insert them into the document so that you can really
rewrite your pages on the fly, without a trip back to the server.

Because it is developed to offer access to and change every aspect of XML documents,
the DOM has many possibilities that the average web developer will never need. For
instance, you can use it to edit the comments in your HTML document, but I don't see any reason why
you would want to do so. Similarly, there are sections of the DOM that deal with the DTD/Doctype, with
DocumentFragments (tiny bits of a document) or the enigmatic CDATA. You won't need these parts of
the DOM in your HTML pages, so I ignore them and concentrate instead on the things that you'll need in
your daily work.

Nodes

The DOM is a Document Object Model, a model of how the various objects of a document are related to each
other. In the Level 1 DOM, each object, whatever it may be exactly, is a Node. So if you do

<P>This is a paragraph</P>

you have created two nodes: an element P and a text node with content 'This is
a paragraph'. The text node is inside the element, so it is considered a child node of the
element. Conversely, the element is considered the parent node of the text node.

<P> <-- element node
|
|
This is a paragraph <-- text node

If you do

<P>This is a <B>paragraph</B></P>

the element node P has two children, one of which has a child of its own:

<P>
|
--------------
| |
This is a <B>
|
|
paragraph

Finally there are attribute nodes. (Confusingly, they are not counted as children
of an element node. In fact, while writing this pages I've done a few tests that seem to indicate
that Explorer 5 on Windows doesn't see attributes as nodes at all.) So

So these are element nodes, text nodes and attribute nodes. They constitute about 99% of the content of an
HTML page and you'll usually busy yourself with manipulating them. There are more kinds of nodes, but I skip
them for the moment.

As you'll understand, the element node P also has its own parent, this is usually the document, sometimes
another element like a DIV. So the whole HTML document can be seen as a tree consisting of a lot of nodes,
most of them having child nodes (and these, too, can have children).

Walking through the DOM tree

Knowing the exact structure of the DOM tree, you can walk through it in search of the element
you want to influence. For instance, assume the element node P has been stored in the variable
x (later on I'll explain how you do this). Then if we want to access the BODY we do

x.parentNode

We take the parent node of x and do something with it. To reach the B node:

x.childNodes[1]

childNodes is an array that contains all children of the node x. Of course
numbering starts at zero, so childNodes[0] is the text node 'This is a' and childNodes[1]
is the element node B.

Two special cases: x.firstChild accesses the first child of x (the text node), while
x.lastChild accesses the last child of x (the element node B).

So supposing the P is the first child of the body, which in turn is the first child of the document,
you can reach the element node B by either of these commands:

Getting an element

However, walking through the document in this way is quite cumbersome. You'll need to be absolutely certain
of the structure of the entire DOM tree and since the whole purpose of the Level 1 DOM is to allow you to modify the
DOM tree, this could lead to problems really quickly.

Therefore there are several ways of jumping directly to an element of your choice. Once you have
arrived there, you can walk the last bit of the DOM tree to where you want to be.

So let's continue with our example. You want to access the element node B. The very simplest way
is to directly jump to it. By the method document.getElementsByTagName you can construct an
array of all tags B in the document and then go to one of them. Let's assume that this B is the
first one in the document, then you can simply do

var x = document.getElementsByTagName('B')[0]

and x contains the element node B. First you order the browser to get all elements B in
the document (document.getElementsByTagName('B')), then you select the first of all B's in
the document ([0]) and you've arrived where you want to be.

You could also do

var x = document.getElementsByTagName('P')[0].lastChild;

Now you go to the first paragraph in the document (we assume that our P is the first one) and then
go to its lastChild.

The best way, the only way to be certain that you reach the correct element regardless of the current
structure of the DOM tree, is to give the B an ID:

<P ALIGN="right">This is a <B ID="hereweare">paragraph</B></P>

Now you can simply say

var x = document.getElementById('hereweare');

and the element node B is stored in x.

Changing a node

Now that we have reached the node, we want to change something. Suppose we want to change the bold
text to 'bold bit of text'. We then have to access the correct node and change its
nodeValue. Now the correct node in this case is not the element node B but its child text
node: we want to change the text, not the element. So we simply do

Creating and removing nodes

Changing nodes is nice, it can even be useful, but it's nothing compared to actually creating your
own nodes and inserting them into your document. I can easily
add an HR right below this paragraph and
remove it quite as easily.

Creating the element is done by a special method:

var x = document.createElement('HR');

Thus an HR is created and temporarily stored in x. The second step is to insert
x into the document. I wrote a special SPAN with ID="inserthrhere" at point where
it should appear. So we use the appendChild() method on the SPAN and the HR is made a
child of the SPAN and it magically appears:

document.getElementById('inserthrhere').appendChild(x);

Removing it is slightly more complex. First I create a temporary variable node to
store the SPAN, then I tell it to remove its first child (the HR).