Understanding DOM

DOM, which stands for Document Object Model, is quite self-describing: It provides an object model (and, alongside it, an API, or application programming interface) for a document. In the web context, this of course refers to an HTML document.

One of the best ways to visualize the DOM for a web page is to use the DOM Inspector that comes with Mozilla browsers. Within the Document Object Model, all page elements are placed in a treelike hierarchy. Every HTML tag is a node within this tree, with subnodes and parent nodes. Also, every text portion is its own DOM node (a text node, to be exact). Figure 5.1 shows the DOM Inspector for a simple sample document.

Figure 5.1. The DOM Inspector shows all nodes of a document.

Of course, the DOM API supports methods to not only access elements in the DOM tree, but also add and remove elements. Therefore, it is possible to modify virtually anything on the page.

One question remains: What is better, using the DOM or using some standard JavaScript objects like forms or images? Generally, the DOM way is much more flexible, but sometimes more difficult as well. Therefore, if there is a JavaScript shortcut you can use, go with it. Otherwise, familiarize yourself with the DOM.

Note

More DOM-related information can be found at the World Wide Web Consortium (W3C): http://w3c.org/DOM.