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 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.)