Navigation – DOM Style, Part 1

As the final part of my series on Navigation, we’re going to take a different approach and use the Document Object Model (DOM) to tap into properties and methods already inherent in our document.  This is a navigational approach not often used, but one worthy of discussing.  First, we’ll talk about the theory behind this approach and, in the second half of the article, we’ll create page navigation based on what we’ve learned.  Let’s get to it.

$2.89
- OR -

Overview

What is the DOM?

First, some theory.  The Document Object Model was put together and accepted by the W3C along about 1998 in an attempt to standardize content on the web.  The DOM was attractive to become the standard because its tree-like structure could be adapted to any situation and because it provided a simplistic method of description that could be applied to any document.  To help understand this, let’s take a simple example:  the HTML document.  Consider the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>This is my document.</title>

</head>

<body>

<p>This is paragraph one.  Isn't it cute?</p>

<p>This is paragraph two.</p>

</body>

</html>

The code above is a very simple HTML document and I can imagine no one reading this ever creates anything this small or simple, but it serves to illustrate well.  The DOM specifies that every document has a root node (think of it as a tree trunk) and that node serves as a container for the rest of the document.  In our example, the root node is the html tag.  Our document begins with <html> and ends with </html> and those root node tags act as a container of everything else in the document.  Nothing new here, it’s just a little different way of looking at what we’ve worked with for years.

Now let’s dissect that document.  It has two main nodes or branches, the head and the body.  The head of our document contains only one other branch, the title node, but it could contain others, such as meta tags, script tags, and other elements typically found in the head of an html document.  The body is the other part of the document and ours contains only two paragraph nodes or branches, but it could contain tables, divs, images and all the other tags and content that typically make up the body of an html document.  The body is what people actually see in the browser when they open an html document, but the head is just as important, as it provides the instructions that allow the body to behave in a particular way.  Both work together to create the html document that makes up our page.

Now let’s consider another example that may not be quite as familiar to most readers: the XML document.  Consider the following example, which is a much shorter version of one we used In the past, a CD Catalog.  For our purposes here, I shortened it to contain just two CDs because that is enough to illustrate the structure of the document.

Nancy Gill

In early 1996, Nancy Gill picked up her first book on HTML and permanently said goodbye to the legal field. She has been busy ever since developing web sites for businesses, organizations and social groups in Central California and occasionally beyond. Nancy has served as a member of Team Macromedia since late 2001, first with UltraDev and then moving to Dreamweaver when the programs were consolidated in 2002. She also serves as Assistant Manager for the Central California Macromedia User's Group.
Nancy is the co-author of Dreamweaver MX: Instant Trouble-Shooter and technical editor for several Dreamweaver and Contribute related books, including the well-known Dreamweaver MX 2004: A Complete Reference. She also penned the first ever Contribute article for Macromedia's Own Devnet "Getting Up to Speed with Contribute in 10 Minutes".

Nancy has three children, two in college and one in high school. Offline, she enjoys various sporting activities, is a wild NFL football fan and sings in the church choir.

See All Postings From Nancy Gill >>

Reviews

Be the first to write a review

You must me logged in to write a review.