W3C DOM

by Ryan Frishberg

As we've discussed previously, DOM (Document Object Model) is the way to access things on the screen. And, as we've examined, there are numerous browser-inconsistancies from accessing layers with document.layers to document.all to document.getElementById. To standardize the DOM, W3C created a future more standard Document Object Model, which is in place in some current browsers, at least partly, and will be in place (it should be) in future browsers. Currently, IE 5 supports most of the features we'll review, and NS 6 should support all of them, but both can present some problems.

The Consortium's goal, of course, is to have one standard. We've discussed accessing and manipulating layers, but with the W3C DOM, you can control almost every element on the page, create elements out of thin air, never use document.write() again, alter a page instantaneously, and much more. Hopefully, this arouses your interest; if not...you just aren't a true nerd. *Pushes up glasses*

If you like technical (and often arcane) structural details, check out the Document Object Model Core; for info on HTML tags, their attributes, and different methods for specific HTML tags, there's Document Object Model HTML.

Hierarchical Structure

The key to the DOM is its hierarchical structure and "family tree-like" structure. "document" refers to the actual page and content for that page; it is the "top of the tree," and everything else is underneath it. For example, the <HTML> tag is under the document and the <HEAD> tag is under the <HTML> tag; which as we said before, is under the document; etc....

To try to understand DOM and what it is, I'm going to use an example of a family tree. The top would be our parents and the next branch is a different person, etc.... In a real HTML document, the top would be our document, and the "branches" of the DOM "tree" are called "nodes." Every element in a page are nodes. Examples might include <li>, <p>, and <td> tags, as well as text. In fact, every attribute, such as align="center", is (to some extent) a node. Even the value of an attribute (such as "center") is a node (a text node).

Family Tree

Now, here is an example of a family tree (we're only going to have one parent because it relates more to an HTML document, where there's only one parent):


	Charles (Parent)


	John (Sibling)


	Mary (Sibling)


	You


	Elizabeth (Child)


	Joseph (Child)

Now that we have a family tree, let's skip to some more technical stuff, how to traverse a document with DOM (note that when I say DOM from now on, I'm referring to W3C DOM rather than the current DOM implemented in the older browsers). As we already know, we can access a layer with document.getElementById() if we know it's id. Once we have that object, we can then access other layers with relation to it. Let's take a look at some coding, and then we'll look at it in relation to our family tree.

parentNode accesses the parent node. For example, we could use:
document.getElementById("myElement").parentNode

childNodes gives a NodeList of the childs. Example:
document.getElementById("myElement").childNodes
From there, we have an array of nodes, which we can then access the first one like so:
document.getElementById("myElement").childNodes.item(0)
Note that childNodes.item(0) is the same as childNodes[0]

firstChild accesses our first child node. Example:
document.getElementById("myElement").firstChild is the same as document.getElementById("myElement").childNodes[0]

lastChild accesses our last child node. Example:
document.getElementById("myElement").lastChild is the same as:
document.getElementById("myElement").childNodes.item(document.getElementById("myElement").childNodes.length)

previousSibling accesses the sibling node before this one. Example:
document.getElementById("myElement").previousSibling

nextSlibling accesses the sibling node after this one. Example:
document.getElementById("myElement").nextSibling

Access the family members

Now, using what we know, we can look at the family tree (above) and try to access different people from the "You" element, which we'll say we can access by document.getElementById("You").

You: document.getElementById("You")

Charles: document.getElementById("You").parentNode

John: document.getElementById("You").previousSibling

Mary: document.getElementById("You").nextSibling

Elizabeth: document.getElementById("You").childNodes.item(0); document.getElementById("You").firstChild

Joseph: document.getElementById("You").childNodes.item(1); document.getElementById("You").lastChild

Now let's apply this knowledge to an actual HTML document.

Next -->