The Document Object Model (DOM), Part I: Navigating a Simple Document - www.docjavascript.com | WebReference

The Document Object Model (DOM), Part I: Navigating a Simple Document - www.docjavascript.com


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

Navigating a Simple Document

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. Still, you can reach every node of the tree thanks to the DOM's powerful properties, explained earlier in this column. Examine again the object drawing of the simple document 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 one of its four children. You can reach the first child using bodyNode.firstChild or bodyNode.childNodes[0]. You can go to the second child (a text node) using bodyNode.childNodes[1], and so on. You may also access the fourth (and last) child by either bodyNode.childNodes[3] or bodyNode.lastChild.

We have labeled every one of the <P> tags with a unique ID: p1Node, p2Node, and p3Node. Now, suppose you start navigating the tree from p1Node. You can reach the root's second child (a text node) using the nextSibling property: p1Node.nextSibling. The root's third child is reached via:

p1Node.nextSibling.nextSibling

And the last root's child can be navigated to using:

p1Node.nextSibling.nextSibling.nextSibling

Suppose the fourth child did have children (which it does not because it is empty). Then the first child would have been accessed as:

p1Node.nextSibling.nextSibling.nextSibling.childNodes[0]

Suppose now that we start our navigation with the third <P>. We can go back to the second <P> by using the previousSibling property: 

p3Node.previousSibling.previousSibling.previousSibling.childNodes[0]

Let's start again at the <BODY> tag. It has one grandchild: the content of its first <P> tag. You can reach it via:

bodyNode.firstChild.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 <P> tag to the <BODY> root tag, you would use p1Node.parentNode, p2Node.parentNode, or p3Node.parentNode. You may also take a round trip from the root <BODY> to its grandchild and back by using:

bodyNode.firstChild.firstChild.parentNode.parentNode

We have programmed some of the above queries into a JavaScript script in the simple 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: <P>, <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 five top-level children beneath the <BODY> tag: three <P> tags, one text node, 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: May 31, 1999
Revised: May 31, 1999

URL: https://www.webreference.com/js/column40/navigatesimple.html