The W3C DOM consists of three levels that indicate, for the browser, three different levels of
adherence to the standard. For more information, take a look at http://www.w3.org/DOM.
The DOM is made of nodes, and each node is an object. For a Web page, each node maps to
an object that represents an HTML tag. The object, therefore, has properties and methods that
can be applied to an HTML tag. There are three fundamental operations you can accomplish
on a node: find the node (including related nodes such as children, parent, or sibling nodes),
create a node, and manipulate a node.
Identifying a particular node is easy as long as the page author knows the ID of the corresponding
element. In this case, you use the following standard piece of code:
var node = document.getElementById(id);
In particular, if there are multiple elements sharing the same ID value, the method returns the
first object in the collection. This method is supported in the DOM Level 1 and upper levels.
Another interesting method to find elements is the following:
var coll = document.getElementsByTagName(tagname);
The method retrieves a collection of all objects based on the same HTML tag. For example, the
method retrieves a collection of all or all tags in the page.
Related DOM objects are grouped in node lists. Each node has a name, type, parent, and collection
of children. A node also holds a reference to its siblings and attributes. The following
code snippet shows how to retrieve the parent of a node and its previous sibling:
var oParent = oNode.parentNode
var oPrevious = oNode.previousSibling
How can you modify the contents of a node? The easiest and most common approach entails
that you use the innerHTML property:
var node = document.getElementById("button1");
node.innerHTML = "Hey click me";
The innerHTML property is supported by virtually all browsers, and it sets or retrieves the
HTML between the start and end tags of the given object. Some browsers such as Internet
Explorer also support the innerText property. This property is designed to set or retrieve the
text inside of a given DOM object. Unfortunately, this property is not supported by all browsers.
It exists in Internet Explorer and Safari but, for example, it is not supported by Firefox.
Firefox, on the other hand, supports a property with a similar behavior but a different name—
textContent.
Note : The advent of the Microsoft AJAX Client Library (discussed in Chapter 2, “The
Microsoft Client Library for AJAX”) shields developers from having to know much about the
little differences between the DOM implementation of the various browsers. For example, you
should know about innerText and textContent if you’re embedding your own JavaScript in the
page; however, you don’t have to if you rely on the AJAX Client Library to refresh portions of
the displayed page.
Note : Finally, note that you should not check the user agent string to figure out whether
the current browser supports a given feature. You should check the desired object instead.
For example, to know whether the browser supports innerText, you’re better off running the
following code:
var supportsInnerText = false;
var supportsInnerText = false;
if (temp != undefined)
supportsInnerText = true;
...
In this way, you directly check the availability of the property without having to maintain a list
of browsers.
Nodes are created using the createElement method exposed only to the document object.
Alternatively, you can add new elements to the document hierarchy by modifying the
innerHTML property value, or by using methods explicit to particular elements, such as the
insertRow and insertCell methods for the table element. Here’s an example:
// Create an element
var oImg = document.createElement("");
...
// Create a new option for the SELECT element
var oOption = new Option(text, id);
control.options.add(oOption);
With this information, I have only scratched the surface of the DOM implementation in the
various browsers. Nonetheless, the DOM is a key part of the AJAX jigsaw puzzle and deserves
a lot of attention and skilled use. For a primer, you can take a look at http://
msdn.microsoft.com/workshop/author/dom/domoverview.asp.
