Developing web pages using XHTML and CSS is similar to conventional programming in many ways. Recognizing this, several developers have created web page debug and development tools to aid in designing and debugging standards-compliant web pages.

Now that we have discussed CSS and contextual selectors in some detail, it should be clear that understanding the DOM hierarchy is fundamental to properly targeting elements using contextual selectors.

I will describe how you can use the Mozilla DOM Inspector and the Web Developer Toolbar to aid in examining and debugging your designs.

Mozilla DOM Inspector

DOM Inspector in Firefox Tools menu The Mozilla DOM Inspector is an optional component that is installed when you install Firefox 2. You can use the DOM Inspector to view properties applied to each element in the document via style sheets, as well as examining box model properties. By default, it is not installed, so now's a good time to verify that the DOM Inspector is installed. In the Firefox menu bar, click on Tools. You should see DOM Inspector about two-thirds down the drop down menu. If you don't see it, then you'll need to re-install Firefox Open in a New Window selecting the Custom Setup type. Don't worry, Firefox performs a benign install, so it will not wipe out any configuration or add-ons that you have previously set up.

Now, invoke the DOM Inspector. When you first invoke the DOM Inspector, there isn't much information in the DOM Inspector window.

Let's look at the main components of the DOM Inspector interface. The menu bar takes the typical location just below the application title bar.

DOM Inspector Components

Just below the menu bar is the toolbar. The toolbar is home to the Node Inspection button, the Node Search button, the Address field, and Inspect. We'll zero in on these various tools shortly.

Below the toolbar, the main window is split into two panels, side-by-side. The panel on the left is the Document panel, and the panel on the right is the Object pane.

The Document panel is used to view various files associated with the web page. Of specific interest to us are the markup and the style sheets.

The Object panel is used to view elements within the current file selected in the Document panel. This panel is extremely useful for examining details about elements.

DOM Inspector Setup

Let's take a moment to set a couple of options in the DOM Inspector. By overriding the default settings, we can eliminate some of the 'visual clutter' that is displayed in the Document panel.

Document Panel Options

On the upper right corner of the Document panel, click on the Panel Options button.

Click both Show Anonymous Content and Show Whitespace Nodes to uncheck the options. You only need to do this once. The settings persist when you invoke DOM Inspector the next time.

Okay, we're ready to move on to the Document panel ...

The Document Panel

Document Button The Document panel allows you to examine the various files comprising a web page.

This week, I will demonstrate the DOM Nodes (document hierarchy) view. In later weeks, the Stylesheets view will be discussed as we start going into more depth with issues of inheritance and the cascade.

Before we start, open the CSS Zen Garden Open in a New Window. We will be inspecting this web page for our demonstration.

Now, go back to the DOM Inspector. There are several ways to select a web page for inspection.

Since the web page of interest is already open in Firefox, we'll use the last method above. Go to Firefox. While you are viewing the CSS Zen Garden page, invoke the DOM Inspector. Once you've started DOM Inspector, you can minimize the CSS Zen Garden Firefox window so it is out of the way. We'll be doing everything from the DOM Inspector.

Now, let's look at the document hierarchy for the CSS Zen Garden site in the Document panel. At this point, all you see is the root element in the hierarchy, the HTML element.

Click Inspect at the right end of the DOM Inspector toolbar. This opens the DOM Inspector's integrated browser. You'll want to resize your DOM Inspector window so that you can view at least the entire width of the web page.

open integrated browser

Now click on the expand button expand button to the left of the HTML element to expand the hierarchy for the document. Click on the expand button next to the BODY node (element) to display the elements within the BODY node, then click on the first DIV (ID "container") to expose the descendants of the container DIV. (Note that all ID names are displayed in the second column of the DOM Nodes view).

DOM Inspector content DIV You can see that the container DIV wraps three sections of the document: intro, supportingText, and linkList.

Let's find an element on the web page. Expand the supportingText DIV. You should now see five DIVs below the supportingText DIV. Click on the explanation DIV while watching the Browser. When you click on the explanation DIV, the browser will highlight that DIV with a flashing red border. node highlighting
Click Image for an Expanded View

Note: Each time you change focus to a different DIV, the DOM Inspector browser will flash the DIV.

Click on various DIVs to find the content on the web page.

Now, let's do the reverse. Let's find the element in the document hierarchy that corresponds to something we see in the browser.

Node Inspector Button

Scroll down the browser pane until you see the "Benefits" heading. Now, click on the "Node Inspector" button at the far left end of the DOM Inspector Toolbar. The button darkens to indicate that DOM Inspector is in Node Inspection mode. Click on the "Benefits" heading in the browser view. You'll see that the H3 element has been highlighted.

Once you've clicked in the browser window, the "Node Inspection" button de-activates. You have to activate it each time you wish to find a node by clicking in the browser.

node inspection

Note: If you've used the Node Inspector Button to find a node in the DOM, the Node Inspector Button will have no effect if you attempt to click on the same part of the web page. This is because that node is already the focus in the Document panel.

Searching for Elements by Tag, ID, or Class

You can also search for elements in the document hierarchy by tag, ID name, or class name. This is useful if you know of an element that is deep in the hierarchy, and you are trying to use a contextual selector to target it. There are several ways to start a search:

find by type

Once you start the search, you will be presented with a dialog that allows you to specify how you would like to find the element.

Id Search for an element by its ID name
Tag Search for an element by its tag name
Attr Search for an element that includes a specific attribute with a certain value. For example, this is how to search for an element assigned a specific class.
If you search by Attr or Tag, there are likely to be several instances in the hierarchy. Use F3 to advance to the next instance in the hierarchy to continue searching

Text Nodes

When using the DOM Inspector, don't mistaken #text nodes for ID names.

text nodes
enlarge Image

Expand the first P tag under the "participation" DIV until you expose the #text node. #text nodes are 'content' nodes. They correspond to the content between an opening and closing tag. For example, in the following sample code:

<p>This is a paragraph</p>

"This is a paragraph" is the #text node. It is a child of the P tag.

If you click on a #text node, the content of the text node appears in the Object panel. You can orient yourself in the DOM by matching up the #text node with the area in the document that you're interested in.

At this point, I think you have enough information to use the DOM Inspector to examine the document hierarchy of your designs. In the weeks that follow, I will be describing how to use the Object pane to examine style sheets and the effect of inheritance and the cascade.