Working with the DOM

You may have worked with the DOM and not even realized it; for example if you've ever used getElementById or getElementsByTagName (two common methods), then you have worked with the DOM.

The first of the above two methods returns the element that has a matching id attribute from the document. The second method returns an array of elements of a specific type such as an <img>.

In a nutshell, the DOM gives you access to the structure and content of a web page (or XML document), and allows you to make modifications to either using almost any common scripting or web programming language around.

Most of you, I'm sure, would have at least come across these two basic DOM methods and understood the concepts behind their use. I would be surprised if a high percentage of you have not used them frequently.

DOM concepts

Each of the DOM level recommendations defined by the W3C have been designed to promote interoperability between different platforms and to be language independent, so the DOM can be accessed and manipulated not just by JavaScript, but by other popular programming languages such as Java or Python.

The different levels are also designed to be backwards compatible and to function on any browser that implements them. However, since Level 2, the DOM has not been one single specification, but a range of specifications where each supplies one or more interfaces that tackle a particular aspect of DOM manipulation.

The methods and properties that you make use of in order to work with the DOM are exposed through these interfaces, but except for each level's Core Specification, the specifications do not have to be implemented in full.

So different browsers, after implementing the Core Specification, may pick and choose which, if any, of the other specifications they wish to implement.

This often leads to inconsistencies between browsers, and when working with the DOM you'll often find that certain features you wish to make use of are not universally implemented.

The setAttribute method for example, often fails to have the desired effect in IE depending on the attribute that you wish to set. Using it to set an element's class attribute will not work in IE, although Firefox is happy enough to let you use it.

Firefox has pretty much always had a built-in DOM viewer, IE8 finally has one built-in, though an add-on has been long available, and both Safari and Chrome, based on the same WebKit platform, have good developer tools, and any of these can be an invaluable tool when putting pages together.

Using any of these tools, you can easily see how the DOM breaks documents down into a series of nodes in a tree-like structure. The following screenshot shows the 1 top-level DOM representation of the Google homepage in the Firefox DOM inspector:

As you can see, the left-hand pane shows a logical tree representation of the page's structure and makes it easy for you to see which elements are parents, which are siblings, and which are child elements. The right-hand pane gives information about a selected node and its attributes and properties. This can be a very useful tool for checking that any DOM scripting (such as adding or removing elements) is going according to plan.