
127
5
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]).
Commentaires sur ces manuels