The DOM of the <TABLE> tag is tricky because it assumes there is a hidden <TBODY> tag inside the <TABLE> tag.
The table's Document Object Model supports a good structure for utilizing the DOM's properties. Following the tree diagram will help you better understand the navigation steps we take on the tree. Let's look at a particular table:
<TABLE ID="tableNode">
<TR><TD BGCOLOR="yellow">This is row 1, cell 1</TD><TD BGCOLOR="orange">This is row 1, cell 2</TD></TR>
<TR><TD BGCOLOR="red">This is row 2, cell 1</TD><TD BGCOLOR="magenta">This is row 2, cell 2</TD></TR>
<TR><TD BGCOLOR="lightgreen">This is row 3, cell 1</TD><TD BGCOLOR="beige">This is row 3, cell 2</TD></TR>
</TABLE>
In order to synthesize the the Document Object Model, you have to imagine that the HTML code includes the <TBODY> tag pair:
<TABLE ID="tableNode">
<TBODY>
<TR><TD BGCOLOR="yellow">This is row 1, cell 1</TD><TD BGCOLOR="orange">This is row 1, cell 2</TD></TR>
<TR><TD BGCOLOR="red">This is row 2, cell 1</TD><TD BGCOLOR="magenta">This is row 2, cell 2</TD></TR>
<TR><TD BGCOLOR="lightgreen">This is row 3, cell 1</TD><TD BGCOLOR="beige">This is row 3, cell 2</TD></TR>
<TBODY>
</TABLE>
In fact, you can also leave this <TBODY> tag pair in your HTML document and it will behave exactly as if it is not included. Take a look now at the tree drawing.
Let's start navigate 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
tableNode.firstChild.firstChild.childNodes[1].firstChild.parentNode.parentNode.parentNode.parentNode
tableNode.firstChild.childNodes[1].firstChild.firstChild.parentNode.parentNode.parentNode.parentNode
tableNode.firstChild.childNodes[1].childNodes[1].firstChild.parentNode.parentNode.parentNode.parentNode
tableNode.firstChild.childNodes[2].firstChild.firstChild.parentNode.parentNode.parentNode.parentNode
tableNode.firstChild.childNodes[2].childNodes[1].firstChild.parentNode.parentNode.parentNode.parentNode
People who read this tip also read these tips:
Look for similar tips by subject:
| 
