DOM Tutorial

The DOM, or document object model, is a programming interface meant to give web scripts full control over the elements in an XHTML document. To use the DOM, however, knowledge of a scripting language such as JavaScript is necessary. Since the subject of teaching an entire programming language is beyond the scope of this tutorial, we shall assume that the reader already has knowledge of the syntax and concepts of JavaScript programming.

However, the DOM was designed not just to work with XHTML documents, but was also meant for use with all XML-conforming documents as well as legacy HTML documents. Most browsers today, however, don't support portions of the DOM which are XML-specific, of which XHTML documents rely on when interpreted as a pure XML document. As such, this tutorial will only cover the manipulation of style with the DOM, since the manipulation of XHTML elements is not yet supported in a cross-browser way.

Document Interface

Every XHTML document contains a document object, which represents all the elements present in the document. This document object is your primary method for accessing the document's data, and contains several important functions for creating, manipulating, and identifying XHTML elements. Most of the time, you would want to isolate a particular XHTML element for manipulation. To do this, it is necessary to give the element a unique id attribute, so that the element can be accessed through the document.getElementById function.

<p id="para">This is a paragraph.</p>

<script type="text/javascript">
obj = document.getElementById("para");
// obj now contains a reference to the paragraph   
</script>

Note that document.getElementById returns by reference, so any changes that you make with the obj object will be reflected in the document as well. Another way to isolate a particular XHTML element is to use the getElementsByTagName function, which will return a special array of all the elements with a particular tag name that you supply. To get the fifth p tag in a document, for instance, you would call:

document.getElementsByTagName("p").item(4)

Since the return type of getElementsByTagName is a special array, you must use the item method to access the individual elements. The fifth element is accessed by the number 4 because the array starts from the number 0.

Manipulating Style

Perhaps one of the most useful capabilities of the DOM is the ability to dynamically modify the style of a document on-the-fly. Almost any element can have its style changed just by accessing the style property, which maps the element's CSS attributes onto a programming interface. Each CSS rule can be converted to its corresponding DOM name just by removing all the hyphens and capitalizing the first letter of every subsequent word. For instance, font-size is converted to fontSize and background-color to backgroundColor.

<p id="example1"
	onclick="document.getElementById('example1').style.color = 'blue';">
	To see this example in action, click this paragraph.</p>

To see this example in action, click this paragraph.

Note that for you to attach JavaScript code to any element, simply add an event handler such as the onclick attribute in the example above. Also, since the values that you set need to include the appropriate units, style properties both accept and return strings instead of numbers. Therefore, if it is necessary for you to retrieve the numerical value of a CSS attribute, you must use the parseInt or parseFloat function.

<script type="text/javascript">
function example2() {
	obj = document.getElementById("example2");
	if (parseFloat(obj.style.fontSize) == 1)
		obj.style.fontSize = "1.5em";
	else obj.style.fontSize = "1em";
}   
</script>

<p id="example2" style="font-size: 1em" onclick="example2();">
	To see this example in action, click this paragraph.</p>

To see this example in action, click this paragraph.

Since almost every CSS attribute can be manipulated in this fashion, it is now possible for a page to change its appearance depending on the user's preferences. Combined with some creativity, this powerful feature of the DOM can lead to some very innovative designs.

Conclusion

Although this is not all that the DOM is capable of, support for the XHTML namespace today is limited, so the element manipulation capabilities of the DOM can only be used when a XHTML document is erroneously interpreted as a traditional HTML document. However, as support for XHTML grows in the future, the DOM will continue to be the accepted method for manipulating XHTML elements. Meanwhile, more can be learnt about the DOM by reading up through resources on the Internet.