Dreamweaver MX Extensions

DOM is an acronym for Document Object Model. If you're an experienced JavaScripter, and especially if you've worked with coding for Dynamic HTML, you're probably already familiar with using the DOM to script web pages for browser display. If you're not familiar with the DOM, you soon will be! Let's start with a little fundamental information.

The DOM in JavaScript

The DOM in JavaScript is a description of the hierarchy of the scriptable objects in an HTML document. Using the DOM, we can write scripts that access and manipulate specific elements on a page. For example, the following expression

document.myForm.username.value

accesses the value property of a form input object (named username ), which is part of a form object (named myForm ), which is part of the document. The document object contains one or more form objects, which in turn contain various input objects, and so forth. We could also access the value of that particular object by referring to the following, assuming that the object is the fourth input element in the document's first form:

document.forms[0].elements[3].value

As with all computer languages, JavaScript has developed over time. The first incarnation of the DOM, called the Level 0 DOM or Netscape Navigator DOM, contains the basic hierarchical structures listed in the previous examples and is used by older versions of JavaScript and is supported by older browsers. Figure 4.1 shows part of the Level 0 DOM. Figure 4.2 shows a sample of how this structure would be implemented in a simple document. All page elements that are defined as objects in this model (images, forms, form elements) can be controlled by scripting.

Figure 4.1. The Level 0 (Netscape) DOM structure.

Figure 4.2. Chart showing the DOM structure of a simple document.

The Level 0 DOM is widely supported by browsers and is considered a standard in JavaScripting. A more extensive version of the DOM, called Level 1, is currently being developed by the World Wide Web Consortium (W3C), although the browsers' lack of consistent support makes it impossible to call the Level 1 DOM a standard. The Level 1 DOM attempts to define every element of an HTML document as an object, and thus opens the entire page to scripting control. (This is an important cornerstone of DHTML.)

The Dreamweaver DOM

The DOM used by Dreamweaver to access user documents is based on a subset of the Level 0 DOM (see Table 4.1 for a list of supported elements and their specifications). But Dreamweaver also includes extensive use of Level 1 DOM scriptability. Thus, Dreamweaver JavaScript-based extensions can gain access to all aspects of users' documents for editing purposes. (The wonderful thing about writing JavaScript for Dreamweaver is that you can take advantage of Level 1 DOM scriptability without worrying about browser compatibilitybecause no browser will ever see the scripts you create.) To work with this level of control in your extensions, you first need to learn how Dreamweaver implements the Level 1 DOM .

Table 4.1. Level 0 (Netscape) DOM Specifications, As Implemented in Dreamweaver

Object

Properties (* indicates read-only)

Methods

Events

window

document*

navigator*

innerWidth*

innerHeight*

screenX*

screenY*

alert()

confirm()

escape()

unescape ()

close()

setTimeout()

clearTimeout()

setInterval()

clearInterval()

resizeTo()

onResize

navigator

platform*

(none)

(none)

document

forms* [array]

images* [array]

layers * [array]

child objects by name *

nodeType*

parentNode*

childNodes*

documentElement*

body*

URL*

parentWindow*

getElementsByTagName()

hasChildNodes()

onLoad

all tags

nodeType*

getAttribute()

(none)

(HTML elements)

parentNode*

childNodes*

tagName*

attributes by name

innerHTML

outerHTML

setAttribute()

removeAttribute()

getElementsByTagName()

hasChildNodes()

 

form

(In addition to properties available to all tags)

elements* [array]

mmcolorbutton

child objects by name*

(Only those available to all tags)

(none)

layer

(In addition to properties available to all tags) to all tags)

visibility

left

top

width

height

z-index

(Only those available to all tags)

(none)

image

(In addition to properties available to all tags)

src

(Only those available to all tags)

onMouseOver

onMouseOut

onMouseDown

onMouseUp

onClick

button

reset

submit

(In addition to properties available to all tags)

form*

(In addition to methods available to all tags)

blur()

focus()

onClick

checkbox

radio

(In addition to properties available to all tags)

checked

form*

(In addintion to metods available to all tags)

blur()

focus()

onClick

password

text

file

hidden

image (field)

textarea

(In addition to properties available to all tags)

form*

value

(In addition to methods available to all tags)

blur()

focus()

select()

onBlur

onFocus

select

(In addition to properties available to all tags)

form*

options* [array]

selectedIndex

(In addition to methods available to all tags)

blur() [Windows only]

focus() [Windows only]

onChange

onFocus

[Windows only]

option

(In addition to properties available to all tags)

text

(Only those methods available to all tags) to all tags)

(none)

mmcolorbutton

(In addition to properties available to all tags)

name

value

(none)

onChange

array

Boolean

date

function

math

number

object

string

regexp

(matches NN4)

(matches NN4)

(none)

text

nodeType*

parentNode*

childNodes*

data

hasChildNodes()

(none)

comment

nodeType*

parentNode*

childNodes*

data

hasChildNodes()

(none)

nodeList

length*

item()

(none)

Named

NodeMap

length*

item()

(none)

mm:treecontrol

name

size

multiple

style

noheaders

 

mm:treecolumn

name

value

width

align

state

   

mm:treenode

name

value

state

selected

icon

   

note

All specifications for Dreamweaver implementation of the DOM are taken from the Extending Dreamweaver manual. See that reference for more detail, if necessary. (See the Introduction for more on this manual.)

Related

Категории