• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

What Is a DOM?

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 compatibility—because 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.)


  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint