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

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

Navigating a Table

The table's Document Object Model supports a good structure for utilizing the DOM's properties. As shown earlier in this column, the properties childNodes, firstChild, lastChild, nextSibling, and previousSibling can take you from any node of the tree to any other node. Following the tree diagram will help you better understand the navigation steps we take on the tree.

We start from the root, <TABLE>. To go down to the second row of the table, you would go like this:

tableNode.firstChild.childNodes[1]

To reach the first cell of the row, you would go:

tableNode.firstChild.childNodes[1].childNodes[0]

To reach the content of the second cell in the first row:

tableNode.firstChild.firstChild.childNodes[1].firstChild

There are several ways to go back from the the third row to the root:

tr3Node.parentNode.parentNode
tr3Node.previousSibling.parentNode.parentNode
tr3Node.previousSibling.previousSibling.parentNode.parentNode

One-way tickets from the root to the content of each of the six cells are as follows:

tableNode.firstChild.firstChild.firstChild.firstChild
tableNode.firstChild.firstChild.childNodes[1].firstChild
tableNode.firstChild.childNodes[1].firstChild.firstChild
tableNode.firstChild.childNodes[1].childNodes[1].firstChild
tableNode.firstChild.childNodes[2].firstChild.firstChild
tableNode.firstChild.childNodes[2].childNodes[1].firstChild

Round trips to the six cells will look like this:

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

Make sure you understand every turn along these routes. If you don't agree with one of them, you can see them in real action. We print the nodeName property of the printed object as a proof to the correctness of these queries.

Produced by Yehuda Shiran and Tomer Shiran

Created: May 31, 1999
Revised: May 31, 1999

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