10.1 An introduction to the DOM

10.1 An introduction to the DOM

10.1.1 What is the DOM?

The DOM is defined by the W3C authority as follows:

The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure, and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page.

In fact, long before the involvement of the W3C and its standardization, browsers had already introduced methods and properties that would allow alien technologies to communicate the contents of a document. This was a natural process to extend their functions and capabilities to a wider area of applications. You could imagine the excitement of a Web programmer in those early days who could change an image by using onmouseover, manipulate the width and height of a picture, and query the data and properties of a division <div> element. All these could be done with just a couple of lines of coding for Web audiences world-wide. Although the implementations were proprietary at the beginning, they did provide a solid technique to manipulate a Web page and to make it do what you want. This was the initial reason for the formation of the DOM and was very much driven by application demands.

For some early browsers such as NS4.x, the object models and the ways to store and access them were basically tied up with JavaScript. Since the JavaScript engine and its implementation were considered as a part of the browser at that time, there was no difference as to who was controlling the storage in the memory. However, this set-up turned out to be a nightmare for other technologies such as Active Server Page (ASP) and VBScript. In order to define a unified and language-independent structure, IE (or IE4.0) was the first to attempt to take the objects out of a Web page and to embed them into the browser as a data structure very much like a tree. This produced a browser that could contain information to be processed by other technologies such as JScript, VBScript, and a combination of both. The word "object" in this chapter is not just an entity in the language of XHTML but also contains properties and member functions from the concept of object-oriented programming. Naturally, the differences between IE and NS created two different DOMs.

10.1.2 DOM differences and the standard

Some ideas on the confusion regarding the DOMs were briefly mentioned at the beginning of Chapter 6. It's time to provide a clearer picture. As a simple example, consider the following page fragment:

Listing: ex10-01.txt - A Paragraph To Explain The DOM

 1: <div id="obj1" name="obj1" style="position:absolute;top:120px;
 2:        left:150px;width:390px;height:190px;background:#aaffaa">
 3:   <div id="obj2" name="obj2" style="font-family:arial;font-weight:bold;
 4:      font-size:14pt;color:#ff0000;text-align:left;position:relative;
 5:      top:20px;left:15px;width:300px;height:160px">
 6:   DOM is a language independent Application Program Interface (API) to
 7:   allow scripting or other technologies to gain access to the Web page.
 8:   </div>
 9: </div>

This fragment contains two objects, obj1 and obj2. The object obj2 is a division element inside obj1 with a relative position so that any changes to the position of obj1 will result in the relative movement of obj2. If you are using NS4.x, the following code can be used to change the background color and the position of obj1:

<script>
   document.obj1.bgColor="Blue"
   document.obj1.top=300
   document.obj1.left=250
<script>

For NS4.x, the names of the element are part of the document object and therefore their properties can be accessed directly using the name method document.obj1. For the IE family, you can use the following codes to perform a similar task:

<script>
  document.all.obj1.style.backgroundColor="Blue"
  document.all.obj1.style.pixelTop=300
  document.all.obj1.style.pixLeft=250
<script>

In this case, the style operator is used to gain access to the CSS properties. The method document.all.obj1 is a classical DOM structure of IE to locate obj1 method and its related properties. This structure is still supported by the IE browser family. However, the performances of NS and IE are still not the same even in this simple case.

NS6+ doesn't support any of the above structures and will treat them as illegal statements. Instead, NS6+ supports the W3C DOM standard and the following codes are recommended for the same job:

<script>
   document.getElementById("obj1").style.backgroundColor="Blue"
   document.getElementById("obj1").style.top=300+"px"
   document.getElementById("obj1").style.left=250+"px"
<script>

Fortunately, the IE family including IE5+ and IE6+ supports the W3C standard. This means that we can now program Web pages in a more unified way with just one set of codes for all browsers that support the W3C standard. However, it is equally important to know about the various DOM differences among browsers. This will not only help you to read and understand some older pages and their behavior, but also provide you with solid knowledge to deal with backward compatibility issues. In particular, it will definitely help you to answer the following frequently asked question from your boss or customers:

Your page is great. Can you make it work for the xxx browser and version xx?

Thanks to the standardization, both the IE and NS browsers are gradually coming closer together. As a Web programmer, you can now program comfortably with just one set of standard codes using W3C's DOM recommendations. Apart from some exceptions and special cases, you no longer need to deal with the division, anchor, image, form, table, and many other elements in a proprietary way. You have the entire picture of the Web page and it is fully open to the scripting and other technologies. Whether you want to make the object move by changing the CSS top left position of an element as in the previous chapter, or to change the contents or color of a paragraph, the DOM provides you with all the answers and explanations of how it works.

More importantly, the DOM also provides a series of standard interfaces for you to access some special elements such as text boxes, radio buttons, checkboxes, select boxes, and text areas. These are vital components in Web programming and will be discussed in this chapter along with some practical applications.

The application of the DOM is far beyond those mentioned above. With the DOM, programmers can build documents, search for elements, walk through the page structures, and add, modify, or delete the elements and contents of a general page. We will cover some basic DOM techniques in this chapter. More advanced study regarding the DOM will be discussed in the next chapter. As a starting point, some basic input elements such as "Text Field," "Button," "Radio," and "Checkbox" of XHTML are introduced from the DOM's point of view. More importantly, we will show you how to control them with programming techniques via the DOM.