HTML DOM学习心得(附：开心网查找空车位函数)

HTML Dom是一个访问HTML文档的W3C标准。它定义了如何去访问页面元素对象以及属性和方法。
:b"f%Za6?0在DOM标准里面：51Testing软件测试网VKE,t-? f
\n
1 整个HTML文档是一个文档节点。51Testing软件测试网-sQ-dpE
2 每一个HTML 标签都是一个元素节点。51Testing软件测试网.I1?\Mzg
3 HTML 文本都是文本节点。51Testing软件测试网UA#M z/NX!m%Y!F
4 每一个HTML 属性都是一个属性节点。51Testing软件测试网 h nLW5YoA@2B Q

Q\"LaT0cmGeV$v0HTML DOM 的一些主要属性（x是一个HTEML元素）
go+Q@)`B/QJ0x.innerHtml - the inner text value of x (a HTML element)
7w@S+k5sp%I0x.nodeName - the name of x
(Q-PZk/DC1\b0x.nodeValue - the value of x51Testing软件测试网)jk5[3qB;D
n
x.parentNode - the parent node of x51Testing软件测试网\yw?3q.G#SqO8V
x.childNodes - the child nodes of x
?(K/D N1gK.CJ0x.attributes - the attributes nodes of x51Testing软件测试网O'^(a
q^w*~

HTML DOM 的一些主要方法（x是一个HTEML元素）51Testing软件测试网T:v6k%mK
x.getElementById(id) - get the element with a specified id51Testing软件测试网|.tA6@n3Ta;Z
x.getElementsByTagName(name) - get all elements with a specified tag name51Testing软件测试网$y
m$ch;WU*n@
x.appendChild(node) - insert a child node to x51Testing软件测试网 JH)~N;L`d f
x.removeChild(node) - remove a child node from x

通常访问HTML DOM节点有一下三种方法：
|j$u%d#mc(J01 使用getElementById()51Testing软件测试网
p B'sY.E avK.P
  node.getElementsByTagName("tagname");51Testing软件测试网0o*k;_(}-h{ E
2 使用getElementsByTagName()
&^EK(lE0  x=document.getElementsByTagName("p");
^ JYHV-|B0  For i = 0 to x.Length - 151Testing软件测试网&d/m(JD9j-a
    Print x(i).innerText51Testing软件测试网8k5^3mt+d C
3 使用HTML文档的节点树导航51Testing软件测试网ugi A,[(LI
Z
  node.firstChild51Testing软件测试网B!f/lb#F3XcC
  node.childNodes
/M O*Si(V:q7o-I]h0  node.parentNode51Testing软件测试网9@.k!^V@n%r'Pn

w\5\RL2TR0掌握HTML DOM对qtp web测试是很有帮助的。
g1[}jx,H.s0下面有个简单的例子，在开心网上搜索好友列表并把相应的车位状态取出来。如果用qtp实现的话有下面几个难点，好友的列表的长度是动态变化的，好友名称是不固定的，不同的登陆用户有不同的好友。
b6S*D']&Y5fH0使用HTML DOM就可以比较方便的解决找个问题，查看页面源代码我们知道每一个好友都是存在一个"UL"标签里面，而好友的车位状态是存在"LI"标签的子节点里面。

M[ d G(In4[0Function Find_Park()51Testing软件测试网,R-dCCP:s
Dim d51Testing软件测试网x3{7sXe/S1P
Set d = createobject("scrīpting.dictionary")

'Get all the "UL" tag from the page, each object contains the information of one friend51Testing软件测试网1}{5o(N cUTn
Set friends = Browser("争车位 - 开心网").Page("争车位 - 开心网").Object.getElementsByTagName("ul")
T[.{$Zei'NN'X0For i = 0 to friends.Length - 1
7zV!L~ sPt4e$HC0 'Get all the "LI" tag within each friend, one object  whose style is "FLOAT: right" contain the status of the park
0`9u*GZYw&|n yN0 Set friendAttrs = friends(i).GetElementsByTagName("li")

dfdQ@#G gp0 blnFlag = False51Testing软件测试网o
B;IL G$r%\
 For j = 0 to friendAttrs.Length - 1
t
aq([A2E} X m8B0  If strComp("FLOAT: right", friendAttrs(j).style.csstext, 1) = 0 Then
nqFu3\g DIWt0   Set imgs =  friendAttrs(j).GetElementsByTagName("img")
6`L!p-j!Qe snYb d]0   d.Add friends(i).InnerText, imgs(0).GetAttribute("alt")
PXu%c8lw0   blnFlag = True
6{u@cf@0   Exit For51Testing软件测试网h2tu0z:m{"K
  End If51Testing软件测试网g%lQPg*^0M?
 Next51Testing软件测试网?x3MR}Vh;d

9?6V|H~E#B9u_0 If Not blnFlag Then
jXQ:BS ^"uIp0  d.Add friends(i).InnerText, "空"
D5D*Z;w N)K0 End If51Testing软件测试网xwH0bn/LR
Next

%st'K?
g*q$V0Set Find_Park = d
yf4K ~ C/b;W"R0{
H0End Function