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

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


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

Navigating a Descriptive List

The Object Model of a descriptive list (<DL>) is much different than an unordered list (<UL>). Examine again the object drawing of the <DL> list presented earlier. The arrows shown are the navigational routes you can take to reach different nodes of the tree. We have assigned bodyNode to the ID attribute of the <BODY> tag. From the root <BODY> you can go to its only child, the <DL> tag. You can reach this child using bodyNode.firstChild or bodyNode.childNodes[0]. The <DL> node has six children, three for the <DT> tags and three for the <DD> tags. You can go to the first <DT> tag using bodyNode.firstChild.firstChild or bodyNode.firstChild.childNodes[0]. Since the <DT> tags interleave the <DD> tags, you may reach the second <DT> tag via bodyNode.firstChild.childNodes[2]. You may also access the third (and last) <DT> tag by bodyNode.firstChild.childNodes[4]. The three <DD> tags may be reached via the following expressions:

bodyNode.firstChild.childNodes[1]

bodyNode.firstChild.childNodes[3]

bodyNode.firstChild.childNodes[5]

We have labeled every one of the <DT> tags with a unique ID: header1Node, header2Node, and header3Node. Similarly, we have labeled every one of the <DD> tags with a unique ID as well: body1Node, body2Node, and body3Node. Now, suppose you start navigating the tree from header1Node. You can reach the second bullet (an <DT> node) using the nextSibling property: header1Node.nextSibling.nextSibling. The third <DT> tag is reached via:

header1Node.nextSibling.nextSibling.nextSibling.nextSibling

Suppose we want to reach the text node of the third bullet's body. Remembering that each bullet has a single text node child, we can accomplish it by:


header1Node.nextSibling.nextSibling.nextSibling.nextSibling.
  nextSibling.childNodes[0]
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)

Suppose now that we start our navigation with the third <DD> tag. We can go back to the first <DD> element by using the previousSibling property: 

body3Node.previousSibling.previousSibling.previousSibling.previousSibling

We can access the textual content of the first child by going:


body3Node.previousSibling.previousSibling.previousSibling.
  previousSibling.previousSibling.childNodes[0]
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)

Let's start again at the <BODY> tag. It has six grand grandchildren. You can reach them via:

bodyNode.firstChild.childNodes[0].firstChild 

bodyNode.firstChild.childNodes[1].firstChild 

bodyNode.firstChild.childNodes[2].firstChild 

bodyNode.firstChild.childNodes[3].firstChild 

bodyNode.firstChild.childNodes[4].firstChild 

bodyNode.firstChild.childNodes[5].firstChild

Another navigation direction is the child to parent direction. You can reach each node's parent via the parentNode property. To go from each of the <DT> tag to the <BODY> root tag, you would use header1Node.parentNode.parentNode, header2Node.parentNode.parentNode, or header3Node.parentNode.parentNode. Similarly, to go from each of the <DD> tag to the <BODY> root tag, you would use body1Node.parentNode.parentNode, body2Node.parentNode.parentNode, or body3Node.parentNode.parentNode. You may also take a round trip from the root <BODY> to its grand grandchild and back by using:


bodyNode.firstChild.firstChild.firstChild.parentNode.
  parentNode.parentNode
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)

We have programmed some of the above queries into a JavaScript script in the simple document we have presented earlier. As we explained earlier, we chose to just print the nodeName of the object. The nodeName property displays the HTML tag type (examples: <DD>, <BODY>, <FONT>) for tag nodes, and the string #text for text nodes. Notice that this script actually modify the page and hence its Document Object Model. In effect, there are two top-level children beneath the <BODY> tag: a <DL> tag and a <SCRIPT> tag. Not to complicate things, we have avoided using the lastChild property, and hence you won't notice the new <SCRIPT> child.

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/navigatedllist.html