11.1 The object structure of the DOM

11.1 The object structure of the DOM

11.1.1 The DOM structure

According to the W3C authority, the DOM is designed to allow programs and scripts to dynamically access and update the contents, structures, and styles of documents. Some of these features were discussed in Chapter 10. In fact almost any elements in an HTML/XHTML document can be accessed, modified, deleted, or added by using the DOM's features. To do this, the DOM must have an internal representation of the entire page. More precisely, inside the DOM each document has a logical structure, or representation, that is very much like a tree.

For example, if an XHTML document is a big tree, then the following XHTML table in ex11-01.txt can be considered as a branch of the tree:

Listing: ex11-01.txt - An XHTML Table

 1: <table>
 2: <tr><td>Top Pos:</td>
 3:     <td><select onchange="changeCSS()" id="topIdx" >
 4:         <option>120px</option><option>50px</option>
 5:         <option>150px</option>
 6:        </select></td></tr>
 7: <tr><td>Left Pos:</td>
 8:     <td><select onchange="changeCSS()" id="leftIdx" >
 9:          <option>150px</option><option>40px</option>
10:          <option>200px</option><option>260px</option>
11:         </select></td></tr>
12: <tr><td>Bg. Color:</td>
13:     <td><select onchange="changeCSS()" id="bgIdx" >
14:          <option>#aaffaa</option><option>#ffaaaa</option>
15:          <option>#aaaaff</option>
16:         </select></td></tr>
17: </table>

This is an XHTML table which contains three rows. Each row has two cells. The first cell contains a text string and a select box is embedded in the second table cell. Furthermore, there are some options attached to each select box.

The DOM represents this table as a tree data structure of objects. The table element in line 1 is the starting node of this branch. The three table rows are the next level of the branch and can be represented as another three nodes. The table data, text strings, select boxes, and all options are organized in this way to form a subtree of the document. A graphical representation of this subtree is shown in Fig. 11.1.

Along with the data structure, all properties and related functions (if any) associated with each element are also stored and can be referenced in an object-oriented manner. Thus the modeling is based on the objects of a document (HTML/XHTML or XML) and hence is called the "Document Object Model." An object model is not just a data structure of nodes, it also represents objects, which have identities, functions, and inheritance.

For example, when you execute the command

localV = document.getElementById("topIdx")

the getElementById() function searches the tree and tries to find the node with the identity "topIdx". When this node is found, it will return it as an object to the localV variable. This variable localV is therefore an object related to the select box in line 3 and therefore localV.length is legal (in terms of syntax error) to represent the number of options in the box.

One direct advantage of this tree structure is that elements can be searched, added, inserted, and deleted anywhere. Normally, each document contains one doctype node, one root element node, and some comments. The root element serves as the root of the element tree for the document and Fig. 11.1 is just one branch of this element tree.

At the time of writing, the W3C DOM has gone through level 1, 2, and 3 specifications, making it an ideal standard to develop applications on the Web. From basic HTML, Style, Event to Core, the standard has covered almost all aspects of Web programming and their related subjects. For example, the document "Document Object Model Style Specifications" specifies all aspects to access CSS style properties via programs or scripts. Programming interfaces are provided to demonstrate the structure, properties, functions, and calling methods. The DOM is big by any standard and keeps evolving. This may be the reason why there are still no browsers that manage to fully implement all specifications of the DOM. Sometimes the importance of backward compatibility requirements for commercial browsers makes the job even harder (if not impossible). We all want standards but also need some sort of backward compatibility at the same time!

To understand the DOM further, let's begin our structure study by investigating the function getElementById() in detail and look at the general picture of accessing page elements.

11.1.2 A general picture to access Web page elements

Perhaps the most popular technique of all to find an element from the DOM tree is to use the function

document.getElementById()

This is a powerful function and can locate any element within a page. An investigation of this function also reveals a general picture to search and to group elements. To have a better understanding, we start from the answers to the following questions:

• Where does this function come from?

• What is the relationship of this function to the DOM?

• How many other general access functions and methods are there in the DOM?

As discussed in Chapter 10, the DOM works by providing a number of object interfaces to be accessed and used by other programs and scripts. Some basic DOM interfaces such as input, select, and text area have also been discussed in Chapter 10. Another important DOM interface is called the "Interface HTMLDocument." This interface is closely related to HTML and hence to XHTML documents, holding a more general picture to gain access to page elements.

According to the W3C authority, the HTMLDocument is the root of the HTML (or XHTML) hierarchy and holds the entire content of the document. The header definition of this interface (or class definition) is provided as follows:

Listing: ex11-02.txt - The HTMLDocument Interface

 1: interface HTMLDocument : Document {
 2:            attribute DOMString        title;
 3:   readonly attribute DOMString        referrer;
 4:   readonly attribute DOMString        domain;
 5:   readonly attribute DOMString        URL;
 6:            attribute HTMLElement      body;
 7:   readonly attribute HTMLCollection   images;
 8:   readonly attribute HTMLCollection   applets;
 9:   readonly attribute HTMLCollection   links;
10:   readonly attribute HTMLCollection   forms;
11:   readonly attribute HTMLCollection   anchors;
12:            attribute DOMString        cookie;
13:   void               open();
14:   void               close();
15:   void               write(in DOMString text);
16:   void               writeln(in DOMString text);
17:   Element            getElementById(in DOMString elementId);
18:   NodeList           getElementsByName(in DOMString elementName);
19: };

Some people may refer to this interface as the document interface in the DOM since all properties and functions related to this interface have a prefix "document." The interface contains a number of attributes consistent with the attributes in the XHTML specifications. The attributes described here can be used to gain access and modify contents using programming techniques. The first attribute is "title" and therefore the statement

document.title = "My New Title"

can be used to change the title of the page to "My New Title." The DOMString indicates that the type of the title is just a string. Some of the attributes are classified as read-only and cannot be changed. The type of the body in line 6 is the HTMLElement and that means it will return the element as an object. For example, the statement

document.body.style.color = "#ff0000"

can be used to change the font color of the document body. Since document.body is an object, the statement document.body.style.color is legal.

The HTMLCollection type is similar to an array structure. It provides another powerful way to access page elements. We will discuss it in section 11.2. Line 12 is a cookie (document.cookie) and this has already been covered in Chapter 7.

The remaining part of this interface contains some functions (or methods) that you can use with the document object. The document.open() and document.close() functions are used to access the document stream. Some examples on how to use them have also been covered in Chapter 7. Interestingly, the important document.write() and document.writeln() functions are also declared here.

The next function is the getElementById() function. Since the return type is an element, the statement

Document.getElementById("myId").style.color="#0000ff"

is legal and is used here to access the element with id="myId" to change the CSS style color to blue. The last function getElementsByName() is a powerful function. It groups elements together and is particularly useful in database-related applications. This function returns a collection of nodes (or elements) with the same name. The "Matching New Friends" example of the last chapter is an example of this function. In practice, this function is quite efficient and can be used conveniently to handle a number of objects.

From a programming point of view, the following object items in the interface

images, applets, links, forms, anchors

return a collection of object elements (HTMLCollection) associated with them. Together with

getElementById() and getElementsByName()

we have a general picture to access page elements. Apart from the getElementById() function, all the others have a common feature: they are used to group elements together. This type of grouping behavior creates another dimension of applications and forms the central topic in the next section.