包含表格的文档的DOM结构分析

一般而言，DOM结构准确地反映了HTML文档所包含的内容，也就是说，每个HTML标记表现为一个标记节点（tag node），每个文本项内容表现为一个文本项节点（text node）。这种表现形式一般称为WYSIWYG，即所见即所得。但是，<TABLE>标记是一个例外情况。当有<TABLE>标记时，我们可以设想它另外包含一对<TBODY>标记。来看看下面的一段代码：

　　<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>

　　在分析它的DOM结构前，我们要为这段代码添加上一对<TBODY>标记：

　　<TABLE ID="tableNode">
　　<TBODY>
　　　　　　　　中间代码略
　　</TBODY>
　　</TABLE>

　　经过这样的处理，DOM结构可以分析如下：Tree的根是<TABLE>标记节点，它只包含一个孩子节点<TBODY>；<TBODY>标记节点又包含3个孩子节点，每一个节点对应一个表格行<TR>；每个<TR>标记节点包含2个孩子节点，每一个节点对应表格行的一个单元<TD>；每个<TD>标记节点包含孩子节点，也就是一个文本项节点，它表示了单元格的内容。

　　右面是上述HTML文档的DOM Tree图示，可点击放大。

　　包含表格文档的节点导航

　　现在我们来看看如何在包含表格的文档中进行DOM节点导航。同样，正确地理解上面所示的DOM Tree图示，有助于我们清晰地看懂导航节点表达式。

起始节点	到达节点	寻址表达式
<TABLE>	表格的第2行	tableNode.firstChild.childNodes[1]
	表格的第2行的第1个单元	tableNode.firstChild.childNodes[1].childNodes[0]
	第1行第2个单元的内容	tableNode.firstChild.firstChild.childNodes[1].firstChild
表格第3行	<TABLE>	tr3Node.parentNode.parentNode或 tr3Node.previousSibling.parentNode.parentNode或 　　tr3Node.previousSibling.previousSibling.parentNode.parentNode
<TABLE>	分别到达6个单元格	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