Document Object Model (DOM): Objects and Collections

Introduction

Today we introduce the Document Object Model (DOM). The DOM gives you access to all the elements on a web page. Inside the browser, the whole web page—paragraphs, forms, tables, etc.—is represented in an object hierarchy. Using JavaScript, you can create, modify and remove elements in the page dynamically.

Previously, both Internet Explorer and Netscape had different versions of Dynamic HTML, which provided similar functionality to the DOM. However, while they provided many of the same capabilities, these two models were incompatible with each other. In an effort to encourage cross-browser websites, the W3C created the standardized Document Object Model. Firefox, Internet Explorer 7, and many other major browsers implement most of the features of the W3C DOM.

This chapter begins by formally introducing the concept of DOM nodes and DOM trees. We then discuss properties and methods of DOM nodes and cover additional methods of the document object. We also discuss how to dynamically change style properties, which enables you to create many types of effects, such as user-defined background colors and animations. Then, we present a diagram of the extensive object hierarchy, with explanations of the various objects and properties, and we provide links to websites with further information on the topic.

Software Engineering Observation 10.1 - With the DOM, XHTML elements can be treated as objects, and many attributes of XHTML elements can be treated as properties of those objects. Then, objects can be scripted (through their id attributes) with JavaScript to achieve dynamic effects.

Modeling a Document: DOM Nodes and Trees

The document’s getElementById method is the simplest way to access a specific element in a page. In this section and the next, we discuss more thoroughly the objects returned by this method.

The getElementById method returns objects called DOM nodes. Every element in an XHTML page is modeled in the web browser by a DOM node. All the nodes in a document make up the page’s DOM tree, which describes the relationships among elements. Nodes are related to each other through child- parent relationships. An XHTML element inside another element is said to be a child of the containing element. The containing element is known as the parent. A node may have multiple children, but only one parent. Nodes with the same parent node are referred to as siblings.

Some browsers have tools that allow you to see a visual representation of the DOM tree of a document. When installing Firefox, you can choose to install a tool called the DOM Inspector, which allows you to view the DOM tree of an XHTML document. To inspect a document, Firefox users can access the DOM Inspector from the Tools menu of Firefox. If the DOM inspector is not in the menu, run the Firefox installer and choose Custom in the Setup Type screen, making sure the DOM Inspector box is checked in the Optional Components window.

Microsoft provides a Developer Toolbar for Internet Explorer that allows you to inspect the DOM tree of a document. The toolbar can be downloaded from Microsoft at http:// go.microsoft.com/fwlink/?LinkId=92716. Once the toolbar is installed, restart the browser, then click the icon at the right of the toolbar and choose IE Developer Toolbar from the menu. Figure 10.1 shows an XHTML document and its DOM tree displayed in Firefox’s DOM Inspector and in IE’s Web Developer Toolbar.

The XHTML document contains a few simple elements. We explain the example based on the Firefox DOM Inspector—the IE Toolbar displays the document with only minor differences. A node can be expanded and collapsed using the + and - buttons next to the node’s name. Figure 10.1(b) shows all the nodes in the document fully expanded. The document node (shown as #document) at the top of the tree is called the root node, because it has no parent. Below the document node, the HTML node is indented from the document node to signify that the HTML node is a child of the #document node. The HTML node represents the HTML element (lines 7–24).

  1 <?xml version = "1.0" encoding = "utf-8"?>
  2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4
  5 <!-- Fig. 10.1: domtree.html -->
  6 <!-- Demonstration of a document's DOM tree. -->
  7 <HTML XMLNS="http://www.w3.org/1999/xhtml">
  8   <HEAD>
  9      <TITLE>DOM Tree Demonstration</TITLE>
  10   </HEAD>
  11   <BODY>
  12  <H1>An XHTML Page</H1>
  13  <P>This page contains some basic XHTML elements. We use the Firefox 
  14     DOM Inspector and the IE Developer Toolbar to view the DOM tree 
  15     of the document, which contains a DOM node for every element in
  16     the document.</P>
  17  <P>Here's a list:</P>
  18    <UL>
  19       <LI>One</LI>
  20       <LI>Two</LI>
  21       <LI>Three</LI>
  22    </UL>
  23   </BODY>
  24 </HTML>

Click here for larger image
Fig. 10.1 - Demonstration of a document’s DOM tree.

Click here for larger image
Fig. 10.1a - a) The XHTML document is rendered in Firefox. (Part 1 of 3.)

Click here for larger image
Fig. 10.1b - b) The Firefox DOM inspector displays the document tree in the left panel. The right panel shows information about the currently selected node. (Part 2 of 3.)

Fig. 10.1c - c) The Internet Explorer Web Developer Toolbar displays much of the same information as the DOM inspector in Firefox in a panel at the bottom of the browser window. (Part 3 of 3.)

Also, notice that, in addition to the text nodes representing the text inside the body, paragraphs and list elements, a number of other text nodes appear in the document. These text nodes contain nothing but white space. When Firefox parses an XHTML document into a DOM tree, the white space between sibling elements is interpreted as text and placed inside text nodes. Internet Explorer ignores white space and does not convert it into empty text nodes. If you run this example on your own computer, you will notice that the BODY node has a #comment child node not present above in both the Firefox and Internet Explorer DOM trees. This is a result of the copyright line at the end of the example file that you downloaded.

This section introduced the concept of DOM nodes and DOM trees. The next section considers DOM nodes in more detail, discussing methods and properties of DOM nodes that allow you to modify the DOM tree of a document using JavaScript.

Document Object Model (DOM): Objects and Collections
Traversing and Modifying a DOM Tree