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

The Web Professional's Handbook: Document Object Models

Information About Nodes



Property

 Read/write

Description
className

read/write

Accesses the class attribute of an HTML element node.

x.className = 'newClass': Changes the class of node x. If the new class has associated styles, these styles are immediately applied.
id

read/write

Accesses the id attribute of an HTML element node.

x.id = 'newID':
Changes the id of node x. Here, too, the browser immediately applies the styling of #newID, if it exists.
innerHTML

read/write

Accesses the HTML contained by a node. This is originally a Microsoft property, not a W3C one, but it's so useful that all browsers have copied it.

x.innerHTML = 'A <b>new</b> HTML!':
Changes the content of node x to >'A <b>new</b> HTML!'.
nodeType

read-only

Provides the type of a node. The x.ELEMENT_NODE syntax, which is recommended by W3C, is not supported by IE on Windows.

var x = y.nodeType:
x takes a numeric value depending on the node type of y. For example, x=1 if y is an element node, x=2 if y is an attribute, and x=3 if y is a text node.
nodeValue

read/write

Accesses the value of an attribute node or text node.

var x = y.nodeValue:
If y is a text node, x contains the text. If y is an attribute node, x contains the value of the attribute.

x.nodeValue = 'New value': Sets the value of node x.
tagName

read-only

Provides the tag name of an element node.

var x = y.tagName:
x is now the tag name of node y (For example, 'P' or 'A').
title

read/write

Accesses the title attribute of a node.

x.title = 'New title':
Sets the title of node x. The new title is immediately visible when the mouse hovers over node x.

Method

Description
getAttribute()

Gets the value of an attribute.

x.getAttribute('align'):
Gets the value of the align attribute of node x.
hasChildNodes()

Tells us whether the node has child nodes.

var x = y.hasChildNodes():
If node y has child nodes x becomes true; if it hasn't, x becomes false.

Using the W3C DOM

The main challenge of the W3C DOM is that it's still fairly new. We haven't yet caught up with the exciting possibilities it offers. The CD review script we saw earlier was only a small example of the way the W3C DOM may revolutionize interactive design. We can offer our users pages they can customize completely without reloading the page. This is useful for large forms (insurance, bank loans), and it may be useful for many more web applications.

The ideal way of using the W3C DOM hasn't been invented yet, however. Programmers and designers will create new concepts, new ways of interacting with their users, and the Web will be changed by these ideas. Besides, there are still some browser incompatibilities to solve.

All this means that if you create a really good application, which uses the W3C DOM to its maximum potential and serves to give your users more power over their environment, you could take a leading part in this quiet revolution.

The W3C DOM is waiting to be discovered.

Summary

In this chapter we've introduced the four Document Object Models that you need for writing cross-browser JavaScript code. We've seen that the Level 0 DOM only offers access to forms, images, and links, but is supported by nearly all browsers. The two Intermediate DOMs, document.layers (Netscape) and document.all (IE) enjoy only a limited browser support, but are necessary for cross-browser DHTML. The W3C DOM is the most complete of all available DOMs and is supported by all version 5 and higher browsers. It allows you to completely rewrite a page, or to change any aspect of a page you like.

Bookmarks

DOM Level 0 description – http://developer.netscape.com/docs/manuals/js/client/jsref/index.htm.

This contains a description of JavaScript as implemented in Netscape 2, 3, and 4. Any object, method, or property supported by Netscape 3 is part of the Level 0 DOM.

Netscape DOM – Same resource.

Any object, method, or property supported by Netscape 4, but not by Netscape 3, is part of the Netscape DOM.

IE 4 DOM –  http://msdn.microsoft.com/library/default.asp?url=/workshop/author/om/doc_object.asp.

Confusingly, MSDN calls the IE 4 DOM the 'DHTML Object Model'.

W3C DOM level 1, 2, and 3 – http://www.w3.org/DOM/DOMTR gives a list of all W3C DOM specifications.

W3C DOM Compatibility Table – http://www.xs4all.nl/~ppk/js/.

 


Created: March 11, 2003
Revised: March 28, 2003

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