Chapter 5: The Dreamweaver Document Object Model - MACROMEDIA DREAMWEAVER 8-EXTENDING DREAMWEAVER Manual

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
tag, and the two largest trunks are the
include the ,
TITLE STYLE
tag include headings (
BODY
text-level elements ( ,
FONT
offshoots include attributes such as
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
document.myForm.myRadioGroup[0]
tag and the
HEAD
, , ,
SCRIPT ISINDEX BASE
, , and so on), block-level elements (
H1 H2
, , and so on), and other element types. Leaves on these
BR IMG
, ,
WIDTH HEIGHT
in the document is referenced as
myForm
).
tag. Offshoots of the
BODY
, , and tags. Offshoots of the
META LINK
, ,
P DIV
, and others.
ALT
5
HTML
tag
HEAD
, and so on),
FORM
127