Dynamic Content with DOM-2 (Part I of II)

The relatively recent emergence of peer-to-peer distributed computing and the renewed interest in real-time data exchange have stoked the embers of a hot topic: displaying dynamic content over the Web. Unfortunately, the statelessness of HTTP and the limitations of the rendering components of different browsers present significant challenges to web developers wishing to get fresh information to the client without sending additional requests to a server.

Until recently, developers have addressed this challenge by falling back on JavaScript trickery, such as cleverly placed document.write() statements, framesets, and IFRAMEs, or the use of Internet Explorer's innerHTML() and insertAdjacentHTML() functionality to insert new HTML content. While these methods are successful to some degree, they are usually tied to a specific browser implementation. A specific drawback is that these techniques do little to address the structure of the document in question. For the most part, a string of HTML is simply inserted into the page over and over again, with little regard for what is actually being rendered.

Fortunately, with the advent of Internet Explorer 5 (IE5) and Netscape 6 (NS6), we now have a better approach. The Document Object Model Level 2 (DOM-2), supported in both Mac IE5 and NS6, provides an interface that enables developers to generate HTML on the fly, after the page has loaded. We accomplish this by calling DOM-2 methods to create HTML elements, defining the elements' attributes, and appending them to the document body or existing elements. This article explores some of the basic functionality of DOM-2 for generating dynamic content in the browser.

This article assumes you have a general knowledge of proper document structure and understand the concept of the document as a series of nested parent and child HTML objects.

Nodes and Elements

The DOM-2 specification identifies all items that compose a document as nodes. The node interface provides a set of common methods and properties that allow items within a document to be accessed and manipulated.

IE5 recognizes everything in your HTML document to be either an element or a text node, as does NS6 (and Mozilla). It's important to understand the fundamental differences between elements and text nodes. Elements are universally associated with angle-bracketed tags. In HTML, all tags are elements, such as <P>, <IMG> and <DIV>. Elements are also likely to have attributes and contain child nodes.

Text nodes, on the other hand, represent a chunk of text. Unlike elements, text nodes have neither attributes nor children (although they inherit both the childNodes and attributes collections from the node interface.)

Consider the following example code:

<span id="weather">Partly cloudy, scattered showers, high 67</span>

The code above is comprised of two separate nodes. The <SPAN> tag is an element node, with a single ID attribute. The text inside the SPAN is in fact a separate text node. Being only text, it has no attributes or children.

Elements and text nodes share some common properties:

• nodeType: This property holds a numeric value that corresponds to the type of node. Elements have a nodeType value of 1, while text nodes have a nodeType value of 3. This is useful for identifying the type of a particular node in an operation where several nodes of unknown type need to be examined.

• nodeName: This property holds a string that, like nodeType, corresponds to the type of node. All text nodes have the string "#text" as the value of nodeName. For elements, nodeName contains the name of the element tag. Thus, an HTML image tag would have a nodeName of "IMG."

• nodeValue: This property holds the value of the node, if any. Elements have a nodeValue of null. Text nodes have a nodeValue that is the actual string of text within that node.

For a complete list of node properties and methods, you can refer to the W3C DOM-2 specification.

Creating Elements and Text

The creation of new nodes is made possible by a set of methods available on the document object. These methods are:

• createElement(String type): Creates a new element of the specified type and returns a reference to that element.

• createTextNode(String text): Creates a new text node with the content specified in text and returns a reference to that node.