文档对象模型(DOM)
上一篇 / 下一篇 2008-07-09 23:49:57 / 个人分类:Automation
3[\eoRY E07.4.1、DOM眼中的HTML文档:树
s-{6tH,J)c{ _ X0 在DOM眼中,HTML跟XML一样是一种树形结构的文档,<html>是根(root)节点,<head>、<title>、<body>是<html>的子(children)节点,互相之间是兄弟(sibling)节点;<body>下面才是子节点<table>、<span>、<p>等等。如下图:
H%_"bX"G"@t2oI%G0
`0L_sWY)a%V0 51Testing软件测试网 C!@;kj0|_Z
51Testing软件测试网'|1R ?}-D2\s3m 这个是不是跟XML的结构有点相似呢。不同的是,HTML文档的树形主要包含表示元素、
DOM下,HTML文档各个节点被视为各种类型的Node对象。每个Node对象都有自己的属性和方法,利用这些属性和方法可以遍历整个文档树。由于HTML文档的复杂性,DOM定义了nodeType来表示节点的类型。这里列出Node常用的几种节点类型:51Testing软件测试网;`:sE}q;GI6x
接口 | nodeType常量 | nodeType值 | 备注 |
Element | Node.ELEMENT_NODE | 1 | 元素节点 |
Text | Node.TEXT_NODE | 3 | 文本节点 |
Document | Node.DOCUMENT_NODE | 9 | document |
Comment | Node.COMMENT_NODE | 8 | 注释的文本 |
DocumentFragment | Node.DOCUMENT_FRAGMENT_NODE | 11 | document片断 |
Attr | Node.ATTRIBUTE_NODE | 2 | 节点属性 |
DOM树的根节点是个Document对象,该对象的documentElement属性引用表示文档根元素的Element对象(对于HTML文档,这个就是<html>标记)。Javascrīpt操作HTML文档的时候,document即指向整个文档,<body>、<table>等节点类型即为Element。Comment类型的节点则是指文档的注释。具体节点类型的含义,请参考《Javascrīpt权威指南》,在此不赘述。51Testing软件测试网0~Cj*R^.NY6J
\ z Ra-O!W0 Document定义的方法大多数是生产型方法,主要用于创建可以插入文档中的各种类型的节点。常用的Document方法有:
方法 | 描述 |
createAttribute() | 用指定的名字创建新的Attr节点。 |
createComment() | 用指定的字符串创建新的Comment节点。 |
createElement() | 用指定的标记名创建新的Element节点。 |
createTextNode() | 用指定的文本创建新的TextNode节点。 |
getElementById() | 返回文档中具有指定id属性的Element节点。 |
getElementsByTagName() | 返回文档中具有指定标记名的所有Element节点。 |
对于Element节点,可以通过调用getAttribute()、setAttribute()、removeAttribute()方法来查询、设置或者删除一个Element节点的性质,比如<table>标记的border属性。下面列出Element常用的属性:
0g2n6^/n^{0??"Q0#@MI8WE&qEnH g0
属性 | 描述 |
tagName | 元素的标记名称,比如<p>元素为P。HTML文档返回的tabName均为大写。 |
s4j]5T7pd7A"v'Ha0 Element常用的方法:
#ff7C4N"qJ8c051Testing软件测试网)OM0Hl[2?方法 | 描述 |
getAttribute() | 以字符串形式返回指定属性的值。 |
getAttributeNode() | 以Attr节点的形式返回指定属性的值。 |
getElementsByTabName() | 返回一个Node数组,包含具有指定标记名的所有Element节点的子孙节点,其顺序为在文档中出现的顺序。 |
hasAttribute() | 如果该元素具有指定名字的属性,则返回true。 |
removeAttribute() | 从元素中删除指定的属性。 |
removeAttributeNode() | 从元素的属性列表中删除指定的Attr节点。 |
setAttribute() | 把指定的属性设置为指定的字符串值,如果该属性不存在则添加一个新属性。 |
setAttributeNode() | 把指定的Attr节点添加到该元素的属性列表中。 |
em*x*sea m Q }0 Attr对象代表文档元素的属性,有name、value等属性,可以通过Node接口的attributes属性或者调用Element接口的getAttributeNode()方法来获取。不过,在大多数情况下,使用Element元素属性的最简单方法是getAttribute()和setAttribute()两个方法,而不是Attr对象。
-O$^&j"[0M!H0.{rNp&i
d2s/X07.4.3、使用DOM操作HTML文档
G5T#D"O&r$S0 Node对象定义了一系列属性和方法,来方便遍历整个文档。用parentNode属性和childNodes[]数组可以在文档树中上下移动;通过遍历childNodes[]数组或者使用firstChild和nextSibling属性进行循环操作,也可以使用lastChild和previousSibling进行逆向循环操作,也可以枚举指定节点的子节点。而调用appendChild()、insertBefore()、removeChild()、replaceChild()方法可以改变一个节点的子节点从而改变文档树。
yx&hRh&E;}/~z0
:\"Np$Mdi0 需要指出的是,childNodes[]的值实际上是一个NodeList对象。因此,可以通过遍历childNodes[]数组的每个元素,来枚举一个给定节点的所有子节点;通过递归,可以枚举树中的所有节点。下表列出了Node对象的一些常用属性和方法:
4h x.|:uHHro4h"kD0N N(O i5` y0 Node对象常用属性:
V,dpLI9a051Testing软件测试网6c!e[6S3S Z.`8g属性 | 描述 |
attributes | 如果该节点是一个Element,则以NamedNodeMap形式返回该元素的属性。 |
childNodes | 以Node[]的形式存放当前节点的子节点。如果没有子节点,则返回空数组。 |
firstChild | 以Node的形式返回当前节点的第一个子节点。如果没有子节点,则为null。 |
lastChild | 以Node的形式返回当前节点的最后一个子节点。如果没有子节点,则为null。 |
nextSibling | 以Node的形式返回当前节点的兄弟下一个节点。如果没有这样的节点,则返回null。 |
nodeName | 节点的名字,Element节点则代表Element的标记名称。 |
nodeType | 代表节点的类型。 |
parentNode | 以Node的形式返回当前节点的父节点。如果没有父节点,则为null。 |
previousSibling | 以Node的形式返回紧挨当前节点、位于它之前的兄弟节点。如果没有这样的节点,则返回null。 |
5tC;Y+CY v0 Node对象常用方法:51Testing软件测试网_x:m+o%x*tc#_S ^
51Testing软件测试网SC#oL&jq(|方法 | 描述 |
appendChild() | 通过把一个节点增加到当前节点的childNodes[]组,给文档树增加节点。 |
cloneNode() | 复制当前节点,或者复制当前节点以及它的所有子孙节点。 |
hasChildNodes() | 如果当前节点拥有子节点,则将返回true。 |
insertBefore() | 给文档树插入一个节点,位置在当前节点的指定子节点之前。如果该节点已经存在,则删除之再插入到它的位置。 |
removeChild() | 从文档树中删除并返回指定的子节点。 |
replaceChild() | 从文档树中删除并返回指定的子节点,用另一个节点替换它。 |
51Testing软件测试网/is:xq)C sma;ng
51Testing软件测试网T9j&O?Y9Zj(A`_W
下表是只读类型的属性:51Testing软件测试网DzPL\i
V"F\;sWx}8RsH0
DOM对象属性 | 返 回 值 |
FirstChild | 返回一个对象(Object),表示第一个孩子节点(child node)。 |
LastChild | 返回一个对象(Object),表示最后一个孩子节点(child node)。 |
NextSibling | 返回一个对象(Object),表示下一个相邻的兄弟节点。 |
NodeName | 返回节点对应的HTML标记。比如:P,scrīpt。对应文本项节点,返回#text。 |
nodeType | 返回节点的类型,51Testing软件测试网y'n?-RV4s? 1表示此节点是标记(tag),51Testing软件测试网9tl`7E1}REJH 2表示属性(attribute),51Testing软件测试网Y~'dZjd@ p1y 3表示文本项。 |
parentNode | 返回一个对象(Object),表示当前节点的双亲节点(parent node)。 |
previousSibling | 返回一个对象(Object),表示前一个相邻的兄弟节点。 |
specified | 返回一个布尔型变量(Boolean),表示是否设置了属性值(attribute)。 |
下表是可读写类型的属性:
)z]M,T-cu0
J#ZjrXAO051Testing软件测试网+B-qF0I+n8e`
DOM对象属性 | 返 回 值 |
data | 返回一个字符串,表示文本项节点的值。如果是其他类型节点,返回undefined。 |
nodeValue | 返回一个字符串,表示文本项节点的值。如果是其他类型节点,返回null。 |
vu.lA\
B|0 下表是DOM中相关属性集合:51Testing软件测试网 ?2[H"oc]
51Testing软件测试网/J9u'Q9T{%IY
51Testing软件测试网E7L_i*b/y(v]
DOM对象属性 | 返 回 值 |
attributes | 表示节点的属性集合,通过id来访问,比如attributes.id。 |
childNodes | 表示节点的孩子节点集合,通过数组索引方式访问,比如:childNodes[2]。 |
(k#xp J{,c0
S!Mic.t(m051Testing软件测试网.SE BV e,M/Yo包含表格的文档的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/~
vzMgFu8G.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
[{nCz0k2ke0 经过这样的处理,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])b4RJZ$r0
E6x3T5sq
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对象模型的比较
I&gO:l W1P0%~,x,JA&DW(m5yz0DOM是文档对象化模型(Document Object Model)的简称。使用过DHTML对象模型的开发者一定能非常熟练地操作HTML页面上的每个标记内容,但如果借助DOM技术,我们就可以通过更加直接而且简易的方式达到同样的目的。51Testing软件测试网6Xp%z%z&o}%kr
51Testing软件测试网@'JXNB%Z 概要
'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软件测试网bVVT~
y'i
使用DHTML对象模型访问和更新HTML页面内容时,不可避免地需要查询相关技术手册。因为HTML对象很多,每个HTML对象又有很多的属性、方法和事件。但是采用DOM技术访问和更新HTML页面内容时,任何手册都可以放在一边了。首先查看一下HTML源代码,推算出页面的Tree结构模型;然后,按照层次结构关系操纵需要的属性。比如要更新页面上的文本项内容,如果采用DTHML对象模型,需要使用到innerHTML属性,但必须要注意并不是所有的HTML对象都支持innerHTML属性;如果采用DOM技术,只要修改相关Tree节点都具有的nodeValue属性值即可。51Testing软件测试网MJ"u"W:y+H
j S7v`
\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]XG
与DHTML对象模型相比较,DOM只有一个缺憾:DOM不能支持事件处理,而DTHML对象模型对于文档对象则拥有一个广泛的事件处理功能51Testing软件测试网&TyW;i@)o8~2}1i
相关阅读:
- 软件测试自动化:时机成熟再上马 (caption, 2008-7-07)
- 老婆测试工具培训记 - 启动应用程序的方式 (pcl2004_27, 2008-7-07)
- 配置QTP录制flex2.0.1技巧 (pcl2004_27, 2008-7-08)
- qtp动态脚本执行-Execute (pcl2004_27, 2008-7-08)
- 自动化测试框架设计 (pcl2004_27, 2008-7-08)
- 老婆测试工具培训记 - QTP Scripting - 实践1 (pcl2004_27, 2008-7-09)
- 关于WinRunner处理不识别对象的四种方法 (caption, 2008-7-09)
- 51Testing丛书连载:(十二) QTP自动化测试实践 (fishy, 2008-7-09)
- 老婆测试工具培训记 - QTP Scripting - 实践2 (pcl2004_27, 2008-7-09)
TAG: 自动化测试
标题搜索
日历
|
|||||||||
日 | 一 | 二 | 三 | 四 | 五 | 六 | |||
1 | 2 | ||||||||
3 | 4 | 5 | 6 | 7 | 8 | 9 | |||
10 | 11 | 12 | 13 | 14 | 15 | 16 | |||
17 | 18 | 19 | 20 | 21 | 22 | 23 | |||
24 | 25 | 26 | 27 | 28 | 29 | 30 | |||
31 |
我的存档
数据统计
- 访问量: 90702
- 日志数: 79
- 图片数: 1
- 建立时间: 2008-05-18
- 更新时间: 2009-06-04