Adobe 38040334 - Dreamweaver CS3 User Manual page 96

Chapter 6: The Dreamweaver
Document Object Model
In Adobe Dreamweaver CS3, 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
and the two largest trunks are the
the , ,
title style script
include headings ( , , and so on), block-level elements (
h1 h2
elements ( , , and so on), and other element types. Leaves on these offshoots include
br img
attributes 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 refer to any object in the document by name or by index. For example, if
a Submit button with the name or ID "myButton" is the second element in the first form in the
document, both of the following references to the button are valid:
• By name, as in
document.myForm.myButton
• By index, as in
document.forms[0].elements[1]
Objects with the same name, such as a group of radio buttons, 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" inside a form called "myForm"
is referenced as
document.myForm.myRadioGroup[0]
tag and the
head body
, , , , and
isindex base meta
, , and others.
alt
tag. Offshoots of the
head
tags. Offshoots of the
link
, , , and so on), inline
p div form
).
tag,
html
tag include
tag
body