DOM and JavaScript

If one principle defined the Document Object Model, it would be that information is arranged as a parent-child hierarchy. For example, the following XML:

<parentElement><childElement>My Text Node</childElement></parentElement>

has three nodes: the root node is parentElement. It has one child, the childElement. The childElement element has as its parent the parentElement, and as its child the text node with a value of "My Text Node". The text node has childElement as its parent. Two nodes that share a parent are considered siblings. Notice that the text is its own node. Elements don't actually have a value, they simply have text node children.

You may be familiar with the idea of reading the structure of an XML document using Java technology or another language. When you do so, you use an API, with well-defined functions and object properties. For example, this document has an html element as its root element, which has two children, head and body. (I've removed the white space that would normally appear between these elements to simplify matters; browsers are not yet consistent on how they handle this white space.) To access the body element using Java technology, you could use several different expressions, assuming that you've named the Document object document.

The first approach is to get a list of all of the element's children, then choose a specific item from the list, as in:

bodyElement = document.getChildNodes().item(0).getChildNodes().item(1);

Here, you first get the html element, which is the first child of the document, then get its second child, the body. (getChildNodes() is zero-based.) An alternative approach is to access the html element as first child directly, then move to its first child (head), and then to that element's next sibling (the second child, body):

bodyElement = document.getFirstChild().getFirstChild().getNextSibling();

From there you can get the type of node:

typeInt = bodyElement.getNodeType()

Node types are returned as integers, and allow you to handle each node appropriately; an element (type 1) has a name, but no value, whereas a text node (type 3) has a value but no name.

Once you know what you have, you can retrieve the name of the element:

elementName = bodyElement.getNodeName();

or its text contents:

elementContent = bodyElement.getFirstChild().getNodeValue();

(Remember, the text of an element is a node unto itself, with the element as its parent.)

When you move these functions over to JavaScript, the same basic API is in place, but it's handled slightly differently. For example, properties are accessed directly, rather than through get and set methods, so the same statements in JavaScript would be represented as

bodyElement = document.childNodes.item(0).childNodes.item(1);
bodyElement = document.firstChild.firstChild.nextSibling;

From there you can get the type and name of the element, as well as its contents:

ElementType = bodyElement.nodeType;
elementName = bodyElement.nodeName;
elementContent = bodyElement.firstChild.nodeValue;

Be aware, however, that only properties undergo this name change. Functions that return objects remain constant. For example, you can retrieve a specific object based on its ID, as in:

formElement = document.getElementById("noteForm");

That's the basic idea. Let's see it in action.