| home / programming / professional / chap6/ 1 |    [previous] [next] |
|
|
|
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 |
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.
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: |
| 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.
| home / programming / professional / chap6/ 1 | [previous] [next] |
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: February 18, 2003
Revised: February 18, 2003
URL: http://webreference.com/programming/professional/chap6/1
