User Guide

67
CHAPTER 4
The Dreamweaver Document Object Model
In Macromedia Dreamweaver MX 2004, 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
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, and 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
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]).