Specifications

41
CHAPTER 4
The Dreamweaver Document Object Model
In Dreamweaver, the Document Object Model (DOM) is a critically important tool for extension
builders. It is used to gain access to and manipulate elements within the user’s document and
within the extension file. For this reason, understanding the Dreamweaver DOM is important to
extension developers.
A DOM defines the structure of documents that are created using a markup language. By
representing tags and attributes as objects and properties, the DOM provides a way for
documents and their components to be accessed and manipulated by programming languages.
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
HEAD and BODY. Offshoots of HEAD include TITLE, STYLE, SCRIPT,
ISINDEX, BASE, META, and LINK, and offshoots of BODY include headings (H1, H2, and so on),
block-level elements (
P, DIV, FORM, and so on), text-level elements, (FONT, BR, IMG, etc.) 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 myForm is referenced as document.myForm.myRadioGroup[0]).
Which document DOM?
It is important to distinguish between the DOM of the user’s document and the DOM of the
extension. The information in this chapter applies to both types of Dreamweaver documents, but
the way that you reference each DOM is different.
If you are familiar with JavaScript in browsers, you can reference objects in the active document
by writing
document. (for example, document.forms[0]), the same way that you reference
objects in extension files. To reference objects in the user’s document, however, you must call
dw.getDocumentDOM(), dw.createDocument(), or another function that returns a user
document object.