Chapter 4: The Dreamweaver Document Object Model; Chapter 4: The Dreamweaver Document Object Model - MACROMEDIA DREAMWEAVER MX 2004-EXTENDING DREAMWEAVER Manual

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