The Document Object Model (DOM), Part II (7)

Analyzing a Complex Document

Let's wrap up our introduction of the Document Object Model by analyzing a more complex document. So far, we've dealt with specific HTML structures and relatively simple documents. The following document includes four paragraphs. The third paragraph includes an image, a table, and a bullet list:

<HTML>
<HEAD>
<TITLE> DOM Demo </TITLE>
</HEAD>
<BODY ID="bodyNode">This is document body
<P ID = "p1Node">This is paragraph 1.</P>
<P ID = "p2Node">This is paragraph 2.</P>
<P ID = "p3Node">This is paragraph 3.
     <IMG ID = "imgNode" SRC="doc.gif">This text follows the image
     <TABLE ID="tableNode">
         <TR><TD BGCOLOR=yellow>This is row 1, cell 1</TD>
         <TD BGCOLOR=orange>This is row 1, cell 2</TD></TR>
         <TR><TD BGCOLOR=red>This is row 2, cell 1</TD>
         <TD BGCOLOR=magenta>This is row 2, cell 2</TD></TR>
         <TR><TD BGCOLOR=lightgreen>This is row 3, cell 1</TD>
         <TD BGCOLOR=beige>This is row 3, cell 2</TD></TR>
     </TABLE>
</P>
<P ID = "p4Node">This is paragraph 4.</P>
</BODY>
</HTML>

The <BODY> tag is the head of the tree. It has four paragraph children. All paragraphs but the third include just text. The third paragraph is very busy. It includes an image and a table. Two textual entries are also included in between these HTML structures. Each one of these structures is represented as a child node of the third paragraph node.

We have sketched the tree structure of the above example. You can also pop up the page itself to see the outcome of the HTML document above. For the sake of clarity, we have omitted some of the realtionships. We'll explain the relationships you see on the next page.