The Web Professional's Handbook: Document Object Models -WebReference.com- | 2

The Web Professional's Handbook: Document Object Models

The Level 1 DOM

Meanwhile the W3C had started the DOM standardization process. The result was an all-encompassing model that offers access to every single HTML element on a page. This was a big jump forward. Even better: all newer browsers support the Level 1 DOM. Microsoft implemented it from IE 5 onward, the Mozilla code engine implemented it, and browsers with a smaller market share, like Opera, iCab, and Konqueror, followed suit to a degree.

Although all these browsers support the Level 1 DOM, they do not support it in completely the same way. You'll still encounter some browser differences when you delve deeply into the DOM. Nonetheless the situation has again become manageable for web developers: all browsers at least make an effort to support the same DOM.

DOM	Used for	Netscape	IE	Opera	Other
Level 0 DOM	Form validation, image rollovers	From Netscape 2. Image rollovers added in Netscape 3	From IE 3. Image rollovers added in IE 4	From Opera 3	All JavaScript browsers
Netscape DOM:document.layers	DHTML	Netscape 4 only	none	none	Escape, Omniweb
IE DOM:document.all	DHTML	none	From IE 4	From Opera 6	iCab, Omniweb
Level 1 DOM (W3C)	DHTML and advanced W3C DOM scripting	From Netscape 6 (Mozilla)	From IE 5	DHTML from Opera 4. Full compatibility from Opera 7	iCab, Konqueror, Ice Browser

The Level 0 DOM

Recall that in Chapter 4 we covered the window object. The Level 0 DOM is based around the most important child of the window object: the document object. Through this object, we can access forms, images, links, and a few more objects you'll hardly ever need.

forms and their contained form elements can be accessed for form validation functions, and any other function that reads from or writes to a form field (a loan calculator, for instance).
images are usually accessed to create the famous rollover effect.
links can be accessed to add an event handler to each of them.

The core of the Level 0 DOM looks something like this:

Not surprisingly, the root of the document is the document object. A DOM reference always starts at the document and then moves down the DOM tree. For instance:

document.forms['myform'].elements[1]

Here, we start at the document, then move to the form named 'myform', and then move to the second contained element. Once you've arrived there, you can ask the browser what the user has entered or enter your own text.

Though IE also accepts myform.elements[1] as a valid reference, the other browsers don't understand it and will give JavaScript errors. Therefore you must always start with the document.

The document Object

Let's start with the document itself. It has a few properties of its own, which give access to old-fashioned attributes of the <body> tag, like fgColor (text color) or bgColor (background color). For instance, to make the background of the page red, use:

document.bgColor = '#cc0000'

Though old color properties like bgColor still work, it's better not to use them. Nowadays the colors of texts and links are usually set through CSS and should be changed through CSS or DHTML.

Property	Read/write	Description
alinkColor	read/write	Accesses the alink attribute of the <body> tag Deprecated
bgColor	read/write	Accesses the bgColor attribute of the <body> tag. Deprecated
fgColor	read/write	Accesses the text attribute of the <body> tag. Deprecated
lastModified	read-only	Most web servers send the last modification date of the document in the HTTP header. This property gives the last modification date of the page as a string. If the web server doesn't support the sending of the last modification date, you'll see a date of 1 January 1970 (Netscape) or today (IE).
linkColor	read/write	Accesses the link attribute of the <body> tag. Deprecated
referrer	read-only	Gives the URL of the HTML page from which the current document was reached for example, the page the user clicked a link on that brought them to this page). It should be empty if there is no referer, but there are some browser bugs.
title	read-only in older browsers, but from IE 5 and Netscape 6 onwards you can change the title of the page	Accesses the title of the page (in the <title> tag).
vlinkColor	read/write	Accesses the vlink attribute of the <body> tag Deprecated

Method	Description
open()	Opens the document to receive new input. In practice, this means it deletes the entire document and then allows you to use document.write() for generating new content. After the writing has been finished, you should use document.close() to end the input stream. Some browsers won't show the new page without this command. Don't confuse this with window.open() , which opens a new browser window. You can use document.open() and document.write() to write content into the new window.
close()	Closes the input stream for the document (see above).
write(script )	Evaluates the script given as a parameter and then writes it to the page. For example: document.write('Page last changed at ' + document.lastModified);
writeln(script )	Does exactly the same as write(), except that it adds a newline character at the end of the output.

Apart from the above methods and properties, the document object also contains the forms, images , and links array objects as properties. Since you'll mostly work with these objects, we'll introduce them all.

Created: February 18, 2003
Revised: February 18, 2003

URL: http://webreference.com/programming/professional/chap6/1

The Web Professional's Handbook: Document Object Models -WebReference.com- | 2