10.2 Modeling a Document: DOM Nodes and Trees
As we saw in previous chapters, 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 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).
The HEAD and BODY nodes are siblings, since they are both children of the
HTML node. The HEAD contains two #comment nodes, representing lines 5–6. The
TITLE node has a child text node (#text) containing the text DOM Tree
Demonstration, visible in the right pane of the DOM inspector when the text node
is selected. The BODY node contains nodes representing each of the elements in
the page. Note that the LI nodes are children of the UL node, since they are
nested inside it.
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>
Demonstration of a document's DOM tree.
a) The XHTML document is rendered in Firefox. (Part 1 of
3.)
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.)
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.
Previous Page
