The Document Object Model (DOM), Part I: DOM vs DHTML - www.docjavascript.com

The Document Object Model (DOM), Part I (2)

The DOM vs the DHTML Object Model

The Document Object Model evolved from the DHTML Object Model, but one may argue that it is more like a revolution than an evolution. The DHTML Object Model lets you access and update HTML objects individually. Each HTML tag can be accessed and manipulated via its ID and NAME attributes. Each object sports its own properties, methods, and events. You can use the properties to read and update local attributes of the object. You can use the methods to manipulate the object, and take advantage of the events to trigger pre-defined consequences.

The Document Object Model is much more general than the DHTML Object Model. It provides a model for the whole document, not just for a single HTML tag. The Document Object Model represents a document as a tree. Every node of the tree represents an HTML tag, or a textual entry inside an HTML tag. The tree structure accurately describes the whole HTML document, including relationships between tags and textual entries on the page. A relationship may be of the type child, parent, or sibling.

You need a manual to access and update an HTML page with the DHTML Object Model. The reason being that each tag's object includes different properties, methods, and events. There are tens of HTML tags and tens of properties, methods, and events per each. Most relevant textbooks include an object map that helps you find the right property, method, or event for your particular need. You don't need any manual to access and update an HTML page with the Document Object Model. When looking at HTML code, you can figure out what the tree model of the page looks like, and how to navigate to the properties you need. The Document Object Model allows you to update every textual entry on the page, and only textual entries. To change a textual entry with the DHTML Object Model, most objects support the innerHTML property which you can access and update. To change a textual entry with the Document Object Model, you just change the value of the relevant tree node with the nodeValue property.

The Document Object Model allows you to navigate along the document tree, up and down, and to the sides. You can use the child, parent, and sibling relationships to go from anywhere to anywhere on your page tree. The DHTML Object Model does not include a tree representation of the page and thus does not provide any navigation capabilities. Once you start with a tag's object, you cannot move to other tags in its vicinity. Certain tags, such as the <TABLE> tag, provides specific properties and methods to reach content elements, but the representation is not as consistent and intuitive as that of the Document Object Model. In the case of the <TABLE> tag, for example, you need to look up in the manual and find out that the textual entry of the i,j cell can be accessed via tableObj.rows[i].cells[j].innerHTML. You don't need any manual to access it via the Document Object Model. Just look at the HTML code and you can access every field there with simple navigation steps.

The Document Object Model lets you manipulate the document tree. You can create new nodes, delete existing nodes, and move nodes around the tree. The semantics of these operations is exactly what it seems. They add new tags, delete existing tags, and move tags around the document. The DHTML Object Model does not let you modify the document. When using the DHTML Object Model, you are limited to the object you are working with.

The Document Object Model has one deficiency with respect to the DHTML Object Model: it does not support event handling. The DHTML Object Model provides a wide spectrum of events and event handling capabilities for the document's objects. Since you can't do much without event handling, you'll have to keep your DHTML expertise intact.

Produced by Yehuda Shiran and Tomer Shiran

Created: May 31, 1999
Revised: May 31, 1999

URL: https://www.webreference.com/js/column40/domvsdhtml.html