Chapter 5. The Dreamweaver Document Object Model

In Macromedia Dreamweaver 8, the Document Object Model (DOM) is a critically important structure for extension builders. It lets you access and manipulate elements within a user's document and within the extension file.

A DOM defines the composition of documents that are created using a markup language. By representing tags and attributes as objects and properties, the DOM lets programming languages access and manipulate documents and their components.

The structure of an HTML document can be seen as a document tree. The root is the HTML tag, and the two largest trunks are the HEAD tag and the BODY tag. Offshoots of the HEAD tag include the TITLE, STYLE, SCRIPT, ISINDEX, BASE, META, and LINK tags. Offshoots of the BODY tag include headings (H1, h2, and so on), block-level elements (P, DIV, FORM, and so on), text-level elements (FONT, BR, IMG, and so on), and other element types. Leaves on these offshoots include attributes such as WIDTH, HEIGHT, ALT, and others.

In a DOM, the tree structure is preserved and presented as a hierarchy of parent nodes and child nodes. The root node has no parent, and leaf nodes have no children. At each level within the HTML structure, the HTML element can be exposed to JavaScript as a node. Using this structure, you can access the document or any element within it.

In JavaScript, you can call any document object by name or by index, as described in the following list:

• By name, as in document.myForm.myButton

• By index, as in document.forms[0].elements[1]

Objects with the same name are collapsed into an array. You can access a particular object in the array by incrementing the index with zero as the origin (for example, the first radio button with the name myRadioGroup in the myForm document is referenced as document.myForm.myRadioGroup[0]).