文档对象模型(DOM)

(k#xp J{,c0 

包含表格的文档的DOM结构分析51Testing软件测试网.Fm#I9ru/D j'bZ$Ch

CBcg]&W&D"E`051Testing软件测试网,tv6aqe%U]7Uj5n8g
　　一般而言，DOM结构准确地反映了HTML文档所包含的内容，也就是说，每个HTML标记表现为一个标记节点（tag node），每个文本项内容表现为一个文本项节点（text node）。这种表现形式一般称为WYSIWYG，即所见即所得。但是，<TABLE>标记是一个例外情况。当有<TABLE>标记时，我们可以设想它另外包含一对<TBODY>标记。来看看下面的一段代码：
0fGH,N7UW0
G8R1n$@dk b N b3]0　　<TABLE ID="tableNode">51Testing软件测试网 |\XM5NB
　　<TR><TD BGCOLOR="yellow">This is row 1, cell 1</TD><TD BGCOLOR="orange">This is row 1, cell 2</TD></TR>51Testing软件测试网/@,~M.WmAK8Q
　　<TR><TD BGCOLOR="red">This is row 2, cell 1</TD><TD BGCOLOR="magenta">This is row 2, cell 2</TD></TR>
&E#y Hb4jE*J7i;Gn0　　<TR><TD BGCOLOR="lightgreen">This is row 3, cell 1</TD><TD BGCOLOR="beige">This is row 3, cell 2</TD></TR>51Testing软件测试网B:m@^\?/^ H I
　　</TABLE>51Testing软件测试网qa7H%F+C`$h
51Testing软件测试网6pi;~,X}l#\}
　　在分析它的DOM结构前，我们要为这段代码添加上一对<TBODY>标记：51Testing软件测试网u/{dT/s1T0Tx/~

vzM
gF
u8G.L0　　<TABLE ID="tableNode">51Testing软件测试网_ ?Q+I S$X5q`f
　　<TBODY>
1?"C pW;^$Q"KU0　　　　　　　　中间代码略51Testing软件测试网B5B.d2q6P5C
　　</TBODY>51Testing软件测试网Yjz4t T&yI
　　</TABLE>
lc rav*J9|f0
[{n
Cz0k2ke0　　经过这样的处理，DOM结构可以分析如下：Tree的根是<TABLE>标记节点，它只包含一个孩子节点<TBODY>；<TBODY>标记节点又包含3个孩子节点，每一个节点对应一个表格行<TR>；每个<TR>标记节点包含2个孩子节点，每一个节点对应表格行的一个单元<TD>；每个<TD>标记节点包含孩子节点，也就是一个文本项节点，它表示了单元格的内容。
_'Zs*N;R#[051Testing软件测试网'@0|Y9Q8C%^zO Os
　　右面是上述HTML文档的DOM Tree图示，可点击放大。51Testing软件测试网:U t/cZ[
51Testing软件测试网S"Dr"QH*~p

　　包含表格文档的节点导航
A])b4RJ
Z$r0
E6x3T5sq h5M3F0　　现在我们来看看如何在包含表格的文档中进行DOM节点导航。同样，正确地理解上面所示的DOM Tree图示，有助于我们清晰地看懂导航节点表达式51Testing软件测试网D*j&YC:x s

qh.x$\n-l`{,['C0 51Testing软件测试网9_y#MW*U$}'u_*FMm

z6P7zY]!]v)Dz0JS应用DOM入门：和DHTML对象模型的比较

%~,x,JA&DW(m5yz0DOM是文档对象化模型（Document Object Model）的简称。使用过DHTML对象模型的开发者一定能非常熟练地操作HTML页面上的每个标记内容，但如果借助DOM技术，我们就可以通过更加直接而且简易的方式达到同样的目的。51Testing软件测试网6Xp%z%z&o}%kr

　　概要
'Ct'z:p9b*R7WQ0
3{%L2en9jn0　　DOM技术被Internet Explorer 5.0及以上版本的浏览器所支持，它采取一种非常直观且一致的方式将HTML文档进行模型化处理，并借此提供访问、导航和操作页面的简易编程接口。通过DOM技术，我们不仅能够访问和更新页面的内容及结构，而且还能操纵文档的风格样式。DOM由W3C组织所倡导，这样，大多数浏览器都将最终支持这项技术。
W2r2~ib:N"I*g051Testing软件测试网4]6\g0X9U%c8I
　　DOM和DHTML对象模型的比较
N*gQmq6N0
'S1_#]npe)c&B0　　可以这么说，DOM是从DHTML对象模型发展而来的。但更准确而言，DOM更象是对DHTML对象模型进行了根本变革的产物。
+T J%N d gNTV`051Testing软件测试网0x Vk-^8LW
　　借助DHTML对象模型技术，我们能够单独地访问并更新HTML页面上的对象，每个HTML标记通过它的ID和NAME属性被操纵，每个对象都具有自己的属性、方法和事件，通过方法操纵对象，通过事件触发因果过程。
*B4D.ObR4F[/tu0
E
?6y!WP-H0　　DOM则要比DTHML对象模型功能更全面，它提供了一个对整个文档的访问模型，而不仅仅再局限于单一的HTML标记（Tag）范围内。DOM将文档描绘为一个树形（Tree）结构，Tree的每个节点表现为一个HTML标记或者HTML标记内的文本项。树形结构精确地描述了HTML文档中标记间以及文本项间的相互关联性，这种关联性包括child（孩子）类型、parent（双亲）类型和兄弟（sibling）类型。51Testing软件测试网g:{1v j"X^VP
51Testing软件测试网bV
VT~ y'i
　　使用DHTML对象模型访问和更新HTML页面内容时，不可避免地需要查询相关技术手册。因为HTML对象很多，每个HTML对象又有很多的属性、方法和事件。但是采用DOM技术访问和更新HTML页面内容时，任何手册都可以放在一边了。首先查看一下HTML源代码，推算出页面的Tree结构模型；然后，按照层次结构关系操纵需要的属性。比如要更新页面上的文本项内容，如果采用DTHML对象模型，需要使用到innerHTML属性，但必须要注意并不是所有的HTML对象都支持innerHTML属性；如果采用DOM技术，只要修改相关Tree节点都具有的nodeValue属性值即可。51Testing软件测试网MJ"u"W:y+H

jS7v` \0　　DOM技术使我们可以方便地沿着文档的树型结构在上、下以及一侧方向做节点导航，从页面的任何地方开始，使用child、parent或者sibling三种关联性组成的表达式代表页面的另外地方。而DTHML对象模型不包含Tree结构，所以也就不具备页面对象的相互导航功能。当我们从一个标记对象开始时，不可能用关联表达式来表达相近的标记。虽然对于某些标记，比如 <TABLE> ，DHTML对象模型可以提供特殊的属性和方法存取相关内容，但实现方式和效果远不如DOM技术显得一致化和直观化。采用DTHML对象模型访问<TABLE> 中的单元（cell）内容时，首先要查询手册确定单元的坐标值i、j，然后再通过表达式tableObj.rows[i].cells[j].innerHTML实现访问。但对于DOM来说，访问TABLE每个单元的内容将变得非常简单，只需要建立一个节点导航表达式就可以。51Testing软件测试网zv*N|\:e
51Testing软件测试网G0SB%E8B
　　另外，DOM技术允许我们操纵文档的Tree结构，这包括创建新节点（nodes）、删除存在的节点以及在Tree中移动节点。实际上，这就是执行创建新标记（tags）、删除存在的标记以及在文档中移动标记的过程。DTHML对象模型则不允许更改文档结构，我们只能操纵现有的对象。51Testing软件测试网&D Q^H.F~"l3A
51Testing软件测试网pE'~ Bk]XG
　　与DHTML对象模型相比较，DOM只有一个缺憾：DOM不能支持事件处理，而DTHML对象模型对于文档对象则拥有一个广泛的事件处理功能51Testing软件测试网&TyW;i@)o8~2}1i