包含表格的文档的DOM结构分析
2006-04-06 12:56
369 查看
一般而言,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 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 |
相关文章推荐
- JS应用DOM入门(3):简单文档DOM结构分析
- JS应用DOM入门:简单文档DOM结构分析
- JS应用DOM入门:简单文档DOM结构分析
- Struts2利用iText导出word文档(包含表格)
- DOM(Document Object Module,文档对象模型)为JavaScript提供完整,全面控制网页结构与内容的对象
- Javascript文档对象模型(DOM)实例分析
- Tika解析非结构文档处理过程的简单分析
- 深入分析MFC文档视图结构(项目实践)
- 深入分析MFC 文档视图结构一
- C++--深入分析MFC文档视图结构(项目实践)
- DOM文档层级结构
- org.apache.ibatis.exceptions.PersistenceException: (或:文档结构必须从头至尾包含在同一个实体内)
- 该文简要描述了DOM概念和内部逻辑结构,给出了DOM文档操作和XML文件互相转换java实现过程。
- 深入分析MFC文档视图结构(项目实践)
- 深入分析MFC文档视图结构
- ECSHOP二次开发文档【文件结构说明和数据库表分析】
- 入分析MFC文档视图结构
- HTML5文档结构分析
- javascript将DOM节点添加到文档的方法实例分析
- javascript将DOM节点添加到文档的方法实例分析