| home / programming / professional / chap6/ 2 |    [previous] [next] |
|
|
|
The W3C DOM has been created for accessing or changing any aspect of an XML or HTML document: tags, text, attributes, and even comments. It's far more versatile than DHTML. It's actually split into modules: in Chapter 5 we gave an overview of the Core and XML modules, but here we'll concentrate exclusively on the use of the W3C DOM in (X)HTML pages.
The W3C DOM is supported by IE 5+, Mozilla (which powers Netscape 6+), and Konqueror. Opera 4 and iCab implemented a small part of the W3C DOM. Complete support for the W3C DOM Level 1 of HTML is only available in Opera 7+.
Of course there are still some browser-incompatibilities. For an overview of browser support for the W3C DOM, see http://www.xs4all.nl/~ppk/js/ under 'W3C DOM Compatibility Table'.To understand the differences between the W3C DOM and the older DOMs, let's take this bit of HTML:
<p id="w3cdomtest">
The <a href="http://www.w3.org/DOM/">W3C DOM</a>
offers Web developers access to
<em>all elements</em> in an HTML page.<br /> Thus it
is the most complete DOM
available
</p>
Of course, it looks like this:
With the older DOMs, you can access only some parts of this paragraph:
The Level 0 DOM only allows you to access the link through document.links[0]
In the Netscape DOM, the paragraph is not a layer because it doesn't have a relative or absolute position set. Therefore, Netscape 4 can't access it.
The Microsoft DOM allows you to access the paragraph itself by document.all.tags['p'][0] and the <a> and <em> tags through its children[] array. The text can be accessed through the innerText property. However, it is not easy to manipulate the text and elements in order to move their position within the HTML document.
The W3C DOM allows you to access any part of this HTML, and to easily manipulate it. For example, to move or delete elements or text from within the HTML document.
The W3C DOM creates a tree structure for this paragraph that looks like this:
The <p>, <a>, <em>, and <br> tags are element nodes, and all texts are text nodes. Finally, there are some attribute nodes (not shown in the diagram): the href attribute of the <a> and the id attribute of the <p>.
The W3C DOM is all about manipulating these nodes. For instance, you can remove an element node or a text node; you can change the value of an attribute node or a text node; you can move a node from one position to another. In all these cases the browser immediately shows the result: it immediately updates the DOM tree and thus the page as shown in the browser.
| home / programming / professional / chap6/ 2 | [previous] [next] |
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: March 11, 2003
Revised: March 28, 2003
URL: http://webreference.com/programming/professional/chap6/2
