Document Object Model (DOM)

What is a Document Object Model?

It's fancy programmer-speak, to be honest. What it refers to is a representation of a document as an ordered hierarchy of elements. You see the term DOM a lot when you read materials about programming with XML or any of its dialects: XHTML, TEI, etc.

Here's a sample DOM:

	<div>
  <p></p>
  <p></p>
  <p>
      <span></span>
      <span></span>
      <table></table>
  </p>
</div>

DOM also often refers to a set of W3C specifications that define a platform-independent and language-neutral way to access and modify HTML documents.

Browsing a DOM

The best way to understand the DOM is to look at it in action, and there are a couple of good tools for doing just that:

In Firefox

To browse the DOM of HTML pages in Firefox, the best way is to user the "DOM Inspector", which is not installed by default. To install the DOM Inspector:

Download the Firefox installer
Run the installer, and when prompted select "Custom Install"
On the following screen, when prompted for additional components, select "Developer Tools"
Finish the install
To use the DOM Inspector, look under Tools >> DOM Inspector

The DOM Inspector is a tree view of the HTML document you are looking at.

Note that the DOM inspector will show you stuff that "View Source" will not! This makes it a great tool for working with dynamic HTML and/or AJAX!

In oXygen

oXygen comes installed with an XML Tree Editor, which allows you to both browse and edit the DOM of XML files. Just launch the XML Tree Editor directly, or launch it from within oXygen by going to Perspective >> Tree Editor

Nodes and Elements

In the DOM, most everything is a Node.

a comment is a node:
```

```
an attribute is a node: href="image.gif"
the content of a tag is a node
a tag and its contents is a node
the whole document is a node!

Elements, however, correspond to tags. If you do any programming with XML/XHTML, etc, you will see this.

A Scavenger Hunt

How many nodes can you find in this snippet of XHTML?
How many elements?

<html>
 <p>
    <a href="somedoc.html">Link name</a>
</p>
</html

Hint: look at this HTML document in the Firefox DOM inspector!

Explore

Browsing a DOM in Firefox and in oXygen. Note the ways in which the 2 DOM browsers differ from each other.