The Document Object Model (DOM), Part II: Analyzing a | WebReference

The Document Object Model (DOM), Part II: Analyzing a


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

Analyzing an Unordered List

HTML supports several types of lists that are very popular with Web designers. Let's get acquainted with their Document Object Model. The following document includes one three-bullet <UL> list:

<HTML>
<HEAD>
<TITLE> DOM Demo </TITLE>
</HEAD>
<BODY ID="bodyNode">
     <UL ID = "listNode">
          <LI ID = "bullet1Node">This is bullet 1
          <LI ID = "bullet2Node">This is bullet 2
          <LI ID = "bullet3Node">This is bullet 3
     </UL>
</BODY>
</HTML>

As we said last column, you have to start thinking in terms of a family tree and family relationships. The <BODY> tag is the head of the tree. It has only one child: the <UL> tag. The <UL> element has three children, one for each <LI> tag. Remember that each child is either an HTML tag or a text node. Each of the <LI> tags has one text child which includes the bullet text. Notice that some tag pairs (such as the <LI>) do not include an explicit closing tag. In any case, it is very clear where the textual entry begins (the first <LI> tag), and where does it end (the next <LI> tag).

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. See the three child nodes of the <UL> tag. We explain the relationships you see on the next page.

Let's analyze the <DL> bullet list. In this list the bullet header is separated from the bullet body and thus there is a tag pair that encloses the bullet header (<DT> and </DT>) and a tag pair that encloses the bullet body (<DD> and </DD>). Here is a simple HTML code that includes such a list:

<HTML>
<HEAD>
<TITLE> DOM Demo </TITLE>
</HEAD>
<BODY ID="bodyNode">
     <DL ID = "listNode">
          <DT ID = "header1Node">This is bullet header 1</DT>
            <DD ID = "body1Node">This is bullet body 1</DD>
          <DT ID = "header2Node">This is bullet header 2</DT>
            <DD ID = "body2Node">This is bullet body 2</DD>
          <DT ID = "header3Node">This is bullet header 3</DT>
            <DD ID = "body3Node">This is bullet body 3</DD>
     </DL>
</BODY>
</HTML>

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. The <BODY> tag is the head of the tree. It has only one child: the <DL> tag. The <DL> element has six children, three <DT> tag nodes and three <DD> tag nodes. Each of the <DT> tag nodes has one text child which includes the bullet header. Similarly, each of the <DD> tag nodes has one text child which includes the bullet body. We explain the relationships you see on the next page.

https://www.internet.com

Produced by Yehuda Shiran and Tomer Shiran

Created: June 14, 1999
Revised: June 14, 1999

URL: https://www.webreference.com/js/column41/analyzelist.html