DOM (Document Object Model)

The Document Object Model (DOM) is a way to represent a Web document (see html and xml) as an object that can be manipulated using code in a scripting language (see JavaScript). The DOM was created by the World Wide Web Consortium (W3C) as a way to standardize methods of manipulating Web pages at a time when different brows-ers used different access models. The full specification is divided into four levels (0 through 3). By 2005, most DOM specifications were supported by the major Web browsers.

Using DOM, a programmer can navigate through the hierarchical structure of a document, following links or “descending” into forms and user-interface objects. With DOM one can also add HTML or XML elements, as well as load, save, or format documents.

Code can also be written to respond to a number of “events,” including user keyboard or mouse activity and interactions with specific user-interface elements and HTML forms. For example, the “mouseover” event will be triggered when the user moves the mouse cursor over a defined region. The code can then perform an action such as popping up a box with explanatory text. The “submit” event will be triggered when the user has finished filling in a form and clicked the button to send it to the Web site. When an event occurs, the event object is used to pass detailed information about it to the program, such as which key or button was pressed, the location of the mouse pointer, and so on.

Although learning the DOM methods and how to use them takes some time, and familiarity with JavaScript is helpful, the syntax for accessing DOM methods should be familiar to anyone who has used an object-oriented program-ming language. Here are some simple sample statements.

Get the document with the specified ID: document.getElementById(ID)

Get the element with the specified tag: document.getElementByTagName(tagname)

Get the specified attribute (property) of the specified element:

myElement.getAttribute(attributeName) Create an element with the specified tag and reference it through a variable:

var myElementNode = document. createElement(tagname)

Evaluation

Although dynamic HTML (DHTML) also has an object model that can be used to access and manipulate individual elements, DOM is more comprehensive because it provides access to the document as a whole and the ability to navi-gate through its structure.

By providing a uniform way to manipulate documents, DOM makes it easier to write tools to process them in a series of steps. For example, database programs and XML parsers can produce DOM document “trees” as output, and an XSLT (XML style sheet processor) can then be used to format the final output.

For working with XML, another popular alternative is the Simple API for XML (SAX). The SAX model is quite dif-ferent from DOM in that the former “sees” a document as a stream of events (such as element nodes) and the parser is programmed to call methods as events are encountered. DOM, on the other hand, is not a stream but a tree that can be entered arbitrarily and traversed in any direction. On the other hand, SAX streams do not require that the entire document be held in memory, and processing can some-times be faster.