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

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


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

Navigating a Complex Document

The Object Model of our compound document is quite complicated. Examine again its object drawing. By now you should be able to recognize these relationships almost automatically. We have assigned bodyNode to the ID attribute of the <BODY> tag. From the root <BODY> you can go to any one of its five <P> children. You can reach these children using bodyNode.firstChild, bodyNode.childNodes[1], bodyNode.childNodes[2], bodyNode.childNodes[3], and bodyNode.childNodes[4]. The second, third, and fifth children have one text grandchild node each. The first child is also a text node. You can reach these textual entries by simply going bodyNode.firstChild, bodyNode.childNodes[1].firstChild, and bodyNode.childNodes[2].firstChild, and bodyNode.childNodes[4].firstChild. The <BODY>'s fourth child is the busiest one. This child has four children. The first and third nodes are text nodes. You can reach their textual entries via bodyNode.childNode[3].firstChild and bodyNode.childNode[3].childNodes[2]

The second child is an image. You can reach it by going bodyNode.childNode[3].childNodes[1]. The fourth child is a TABLE node. Last column we explained that the TABLE node has a hidden TBODY child. Therefore, the second child of the third row is:


bodyNode.childNodes[3].childNodes[3].firstChild.childNodes[2].childNodes[1]

And its textual entry is:


bodyNode.childNodes[3].childNodes[3].firstChild.childNodes[2].childNodes[1].
  firstChild
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)

We have labeled every one of the top <P> tags with a unique ID: p1Node, p2Node, p3Node, and p4Node. We have also labeled the non-textual children of the third <P> child: imgNode and tableNode. Now, suppose you start navigating the tree from p1Node. You can reach the second paragraph using the nextSibling property: p1Node.nextSibling. Similarly, you may reach the third paragraph by p1Node.nextSibling.nextSibling. You may reach the IMG node via p1Node.nextSibling.nextSibling.childNodes[1] and the TABLE node via:

p1Node.nextSibling.nextSibling.childNodes[3]

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

p4Node.previousSibling.previousSibling.previousSibling

We can access the textual content of the table's second cell of the first row by going:

p4Node.previousSibling.childNodes[3].firstChild.firstChild.childNodes[1]

Another navigation direction is the child to parent direction. You can reach each node's parent via the parentNode property. To go from one of the table's cell to the root, you can use tableNode.parentNode.parentNode. To go from the third bullet to the root, you should use bullet3Node.parentNode.parentNode.parentNode

You may also take a round trip from the root <BODY> to its fourth child and then to its table's first cell of third row:


bodyNode.childNodes[3].childNodes[3].firstChild.childNodes[2].firstChild.
  parentNode.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 complex document we have presented earlier. As we explained earlier this column, we chose to just print the nodeName of the object. The nodeName property displays the HTML tag type (examples: <UL>, <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 six top-level children beneath the <BODY> tag: the five children mentioned above 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/navigatecomplex.html