Introduction to the Document Object Model

Using the techniques discussed so far, you should be fairly dangerous. You've seen how you can dynamically access and alter just about any property or style parameter of every element on a page.

But what about dynamically adding and removing elements and content? Or changing the content itself?

Dynamic Content

Changing textual content is relatively simple. Every continuous string of character data in the body of an HTML page is represented by a text node. The nodeValue property of these nodes is the text itself. Changing that value will change the text on the page.

Text Nodes

Here's another example using a simple paragraph tag. Use the links to change the text:

This is the initial text.

Change Text 1 | Change Text 2

Now look at the code behind it:

<p id="sample1">This is the initial text.</p>

... code for the links ...

document.getElementById('sample1').firstChild.nodeValue =
  'Once upon a time...';
document.getElementById('sample1').firstChild.nodeValue =
  '...in a galaxy far, far away';

There are a couple of important things to note here. First, text nodes do not have an ID attribute like element nodes can. So they cannot be accessed directly using methods like document.getElementById() or document.getElementsByTagName().

Instead, the code references the text using the parent node, in this case it's the paragraph element with the ID "sample1". This element node has one child node, the text node we want to update. You can see this in the diagram below.

So document.getElementById('sample1').firstChild.nodeValue is used to access this text node and read or set its string value.

It's important to remember that text nodes contain just that, text. Even simple markup tags like B or I within a string of text will create a sub tree of element and text nodes. For example, using the example above and adding tags make the word "initial" bold:

<p id="sample2">This is the <b>initial</b> text.</p>

now gives the "sample2" paragraph element three children instead of one. There is a text node for "This is the ", an element node for the B tag pair and a text node for " text.". The node for the B element has one child node, a text node for "initial". You can see the structure in the diagram below.

To see how this affects scripting code, here's the same example used above but with the additional bold markup:

This is the initial text.

Change Text 1 | Change Text 2

Changing firstChild of the P element now only affects the text "This is the ". Conversely, if you attempt to add markup to the value of a text node, the browser will treat it as plain text, as demonstrated below:

This is the initial text.

Change Text 1 | Change Text 2

Where the link code has been changed to this:

document.getElementById('sample3').firstChild.nodeValue =
  '<b>Once</b> upon a time...';
document.getElementById('sample3').firstChild.nodeValue =
  '...in a galaxy <i>far, far</i> away';

You can avoid problems like this by thinking of text nodes as individual strings of character data located between any two HTML tags, not necessarily matching pairs of tags.

document.getElementById('sample4').innerHtml =
  "<b>Once</b> upon a time...";

Adding Nodes

Nodes can also be added to the DOM. You've already seen how attribute nodes can be created and applied to an element so let's look at adding element and text nodes within the document tree (without using the innerHTML property).

Prev | Next