|MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA|
Dynamic Content with DOM-2 (Part I of II)by Scott Andrew LePera and Apple Developer Connection
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.
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
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
Consider the following example code:
The code above is comprised of two separate nodes. The
Elements and text nodes share some common properties:
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