The Document Object Model (DOM), Part II: Navigating a | 2
   |
The Document Object Model (DOM), Part II (3)
Navigating an Unordered List
The Document Object Model tree includes a node for every tag and for every textual entry. You can start "climbing" the tree only from those nodes that have been assigned the ID attribute. Once you are on the DOM tree, you can reach any node of the tree, no matter how far it is from the starting node. Examine again the object drawing of the <UL> 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 <UL> tag. You can reach this child using bodyNode.firstChild or bodyNode.childNodes[0]. The <UL> node has three children, one for each of the <LI> tag. You can go to the first <LI> tag using bodyNode.firstChild.firstChild or bodyNode.firstChild.childNodes[0]. You may reach the second child via bodyNode.firstChild.childNodes[1]. You may also access the third (and last) child by either bodyNode.firstChild.childNodes[2] or bodyNode.firstChild.lastChild.
We have labeled every one of the <LI> tags with a unique ID: bullet1Node, bullet2Node, and bullet3Node. Now, suppose you start navigating the tree from bullet1Node. You can reach the second bullet (an <LI> node) using the nextSibling property: bullet1Node.nextSibling. The third <LI> tag is reached via:
bullet1Node.nextSibling.nextSiblingSuppose we want to reach the text node of the third bullet. Remembering that each bullet has a single text node child, we can accomplish it by:
bullet1Node.nextSibling.nextSibling.childNodes[0]
Suppose now that we start our navigation with the third <LI> tag. We can go back to the first <LI> element by using the previousSibling property:
bullet3Node.previousSibling.previousSibling
We can access the textual content of the first child by going:
bullet3Node.previousSibling.previousSibling.childNodes[0]
Let's start again at the <BODY> tag. It has three grand grandchildren. You can reach them via:
bodyNode.firstChild.childNodes[0].firstChild
bodyNode.firstChild.childNodes[1].firstChild
bodyNode.firstChild.childNodes[2].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 <LI> tag to the <BODY> root tag, you would use bullet1Node.parentNode.parentNode, bullet2Node.parentNode.parentNode, or bullet3Node.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.parentNodeWe have programmed some of the above queries into a JavaScript script in the HTML document we have presented earlier. It's not that trivial to demonstrate that a query is working. If you try to just print a query, all you get is that the result is an [object]. There are several ways to go around it. We chose to just print the nodeName of the object. The nodeName property displays the HTML tag type (examples: <LI>, <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: one <UL> 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.
Produced by Yehuda Shiran and Tomer Shiran
Created: June 14, 1999
Revised: June 14, 1999
URL: https://www.webreference.com/js/column41/navigateullist.html
Find a programming school near you