Adobe Extending Dreamweaver CS4 - Manual (Page 101)

95
Chapter 6: The Dreamweaver Document
Object Model
In Adobe Dreamweaver, the Document Object Model (DOM) is a critically important structure for extension builders.
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.
About Dreamweaver DOM
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)
• Inline elements ( br , img , and so on)
• 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 mention any object in the document by name or by index. For example, consider that a Submit
button with the name or ID “
myButton ” is the second element in the first form in the document. Then, 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]
The objects with the same name, such as a group of options, 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 option with the name
“
myRadioGroup ” inside a form called “ myForm ” is referenced as document.myForm.myRadioGroup[0] .
Distinguishing between the user document and
extension DOMs
It is important to distinguish between the DOM of the user’s document and the DOM of the extension. The
information in this topic applies to both types of Dreamweaver documents, but the way that you reference each DOM
is different.