|
刚才花了一些时间写的基础教程，由于篇幅和格式的问题，给一个纲要和链接。
我们要使用 web.form 库对网页进行操作，首先要取得想要操作的那个网页节点。若是第一步就出了问题，后续的操作就无法正常进行了。于是，怎样取得指定的网页节点成了一个至关重要的问题。在这里，我简单的列举一些常用的方式（以下的 wb 变量均为 web.form 的一个实例对象）： 1、通过节点的 id 或者 name 一步取得 2、通过子节点取得父节点 3、通过节点名取得节点集合 4、枚举法 + 节点特点
要讨论这个问题，我们得先明白什么是网页节点。我们平时浏览网页的时候一般是不会注意网页节点的，因为网页节点这个概念是相对于网页源代码而言的。我们在网页页面上右键，选择查看源代码即可查看网页的源代码。
我们可以看到网页的源代码的格式与 xml 格式极为相似，也是由一个一个节点构成，具体节点的含义可以看一下百度百科的解释： http://baike.baidu.com/view/47398.htm#2
我们要使用 web.form 库对网页进行操作，首先要取得想要操作的那个网页节点。若是第一步就出了问题，后续的操作就无法正常进行了。于是，怎样取得指定的网页节点成了一个至关重要的问题。在这里，我简单的列举一些常用的方式（以下的 wb 变量均为 web.form 的一个实例对象）：
1、通过节点的 id 或者 name 一步取得
我们一定非常熟悉 wb.getEle 这个东西，因为获取元素我们一般都会调用这个方法。我们可以看一下它的函数原型：
ele = wb.getEle( HTML节点的ID名name, 框架名 )
当提供 id 或 name 可以唯一确定一个节点的时候，我们只要提供网页节点的 id 或者 name 属性，即可获取该节点。
当网页中存在同 name 节点的时候，我们则可以用 wb.getEles 方法取得，我们可以看一下它的函数原型：
tele = wb.getEles( HTML节点的name属性, 框架名 )
可能这个方法大家并不常用，wb.getEles 返回的是节点的集合。因为网页中节点的 id 属性是不可重复的，而 name 属性却是可重复的，因此当我们想要获取的节点有 name 属性的时候，就要考虑到网页中是否有其他节点与之 name 属性相同。wb.getEles 就可以获取所有指定 name 属性的节点。
举个例子，网页代码如下：
<html>
<head>
...
</head>
<body>
<input type="checkbox" name="hobbies" value="足球" />
<input type="checkbox" name="hobbies" value="篮球" />
<input type="checkbox" name="hobbies" value="排球" />
</body>
</html>
我们可以发现我们用 wb.getEle("hobbies") 的话，只能取到足球的 checkbox，而不能取到篮球或排球的节点。这时候，我们就可以使用 wb.getEles 来解决了，代码如下：
var tele = wb.getEles("hobbies");
var 足球, 篮球, 排球 = tele(0), tele(1), tele(2);
排球.checked = true;
上面一段代码就可以实现获取足球、篮球和排球三个节点了，这里要注意的是，wb.getEles 返回的是 com 数组，因此必须使用小括号来读取数组成员，而不是中括号，并且 com 数组的索引是从 0 开始的，而不是 1。
2、通过子节点取得父节点
这也是一个可以被接受的方式。往往我们要直接取得指定的节点十分困难，但是我们发现这个节点的某一个子节点很容易取得。这时候，我们就可以通过这个子节点来取得我们想要的父节点。
举个例子，网页代码如下：
...
<form action="..." method="post">
<input type="text" name="username" id="username" />
</form>
...
假设我们要提交这个表单，你会使用什么方法取得表单节点？或许你会说：“这个表单没有 name，也没有 id，大概只能枚举法或者通过节点名取得。不过它里面有一个 input 节点挺好获取的。”
枚举法或者通过节点名取节点确实是一个办法，但是，当这个节点下某一个子节点非常好取的时候，我们不妨就通过这个子节点搭桥，代码如下：
var childEle = wb.getEle("username"); // 我们取得了子节点
var ele = childEle.parentNode; // 子节点的 parentNode 即为我们要取的父节点
这确实是一个好方法，但是你可能会说：“我根本不知道什么 parentNode 属性，帮助文档里好像也没有提及。”
但是你别忘了，我们还有智能提示，即使没有智能提示也还有 DOM 帮助手册，毕竟这是 IE 的东西，不管aardio什么事，aardio只需要调用 IE 提供的接口就可以了。因此还有许多智能提示以及帮助中没有提及的属性和方法，我们将会尽可能多的让大家了解。
那么，我考大家一个问题，若是网页代码如下，怎么获取表单节点呢？
...
<form action="..." method="post">
<div>
<span>
<input type="text" name="username" id="username" />
</span>
</div>
</form>
...
你也许会说：“这还不简单？同上，childEle.parentNode.parentNode.parentNode...”
噢，这确实可行，但是当父节点层次非常多的时候，我们可以有简便的方法：
var ele = childEle.form;
childEle.form 可以直接获取 childEle 所在的表单节点。是不是感觉被骗了？呵呵。不，我上面讲的那么多并不是废话，因为有时候我们要获取父节点并不一定是一个表单，可能是其他类型的节点，这时候我们就不得不用 parentNode 了。
3、通过节点名取得节点集合
我们知道，凡是网页节点都有一个节点名。那么，我们能不能通过网页节点名来获取网页节点呢？答案当然是肯定的。
节点名类似于节点的 name 属性，是可以重复的，而且由于这些节点名是固定的，几乎没有哪一个网页节点名没有重复，因此取回的同样是节点的集合——一个 com 数组。
要通过节点名获取节点，可以使用 getElementsByTagName，同样通过一个例子说明问题，网页代码如下：
...
<img src="..." alt="确定" />
<img src="..." alt="取消" />
...
倘若整张网页只有这两个 img 节点，我们可以使用如下代码来获取这两个节点：
var tele = wb.document.getElementsByTagName("img");
var 确定, 取消 = tele(0), tele(1);
取消.click();
在这里我就不多做解释，想必大家要是没有忘记上面的“通过 name 属性获取节点”的话，应该很容易能够理解。
至于第三行，我这里简单解释一下，我们看到网页代码中，两个 img 节点都有 onclick 属性，这个属性是指定该节点被单击时触发的脚本。
我们通过 取消.click() 可以触发这个脚本，也就相当于我们单击了取消按钮。
同样的，任何节点都有 getElementsByTagName 函数，我们可以结合上面的方法来获取指定的节点。
举个例子，网页代码如下：
...
<img alt="" />
<!--前面有许多图片-->
<form action="..." method="post">
<input type="text" name="username" id="username" />
<img src="..." alt="确定" />
<img src="..." alt="取消" />
</form>
...
我们要实现填完 username 之后，单击确定按钮，则可以使用如下代码：
/*
取的用户名节点，这里也可以使用 getEle 方法，但是 getEle 方法是 web.form 库的一个封装方法，
该方法并不能在网页节点上使用。譬如 form 是一个表单元素，我们要获取一个在 form 下的有 id 的
子元素，则只能使用 form.getElementById("ID")，而不能使用 form.getEle("ID")。
而 form.getEle("Name") 则可以用 form.getElementsByName("Name")(0) 替代。具体可看库代码。
*/
var username = wb.document.getElementById("username");
var form = username.form;
var img = form.getElementsByTagName("img")(0); // form 下第一个 img 的节点（确定），0 替换为 1 可取得第二个（取消）
img.click();
怎么样？是不是有些明白了？
4、枚举法 + 节点特点
当我们想要获取的节点没有 name，也没有 id。甚至用上面的任何方法都难以获取的时候该怎么办呢？当我们实在没有办法的时候，可以使用枚举法。但是有一点必须确定，这个节点应当是有特征的。
何为有特征？一般的节点都有自己的特点，比如说：在一个 form 中有一个 input 节点，其 type 属性为 "image"，而且我们通过这两个线索可以唯一确定这个节点。我们就可以遍历表单中所有的 input 节点，然后再检查这些节点的 type 属性值。
同样举个例子，网页代码如下：
<form id="frmLogin" action="..." method="post">
<input type="text" name="..." />
<input type="text" name="..." />
<input type="text" name="..." />
<input type="image" />
</form>
没错，我们就要获取那个 type="image" 的 input 节点。还记得吗？我们可以通过 getElementsByTagName 取得所有 input 节点的。如果你还记得，那就跟我一起做：
var form = wb.getEle("frmLogin"); // 先取得表单节点，这一步很方便
var inputs = form.getElementsByTagName("input"); // 看，这句就获取了所有的 input 节点了
嗯，我们已经完成了大部分了，取得了表单下所有的 input 节点的集合，下面我们可以通过 com 库来遍历这些节点，当我们输入 com.each 的时候，aardio会自动生成循环体基本代码，真是太方便了：
var img; // 时刻准备被赋值
for index,obj in com.each(inputs) {
// 现在 obj 就是每一个 input 节点了，有几个 input，就会循环几次
if (string.lower(obj.type) == "image") { // 判断 obj 的 type 属性是否为 image，可以先转化为小写，写得严密一些
// 很激动，现在 obj 就是我们要找的节点了，我们可以把它赋给 img 变量
img = obj;
break; // 赶紧挑出循环，不要浪费系统资源和用户的时间
}
}
if (img != null) { // 如果 img 不为空，即我们取到了这个节点
// 后续操作，点它！
img.click();
}
5、无比强大的 wb.queryEles() 函数
怎么样，是不是很方便呢？赶紧试试看吧。
以上就是我归纳总结的一些取节点的方法，希望对大家有所帮助。如果你是新手，我希望你不要收藏这个网址。我不希望你一碰到要取节点就回来复制、粘贴，不如现在按照上面的方法好好实践操作一下，这些代码如果你一行一行打上去，绝对是有深刻的印象的。况且aardio有智能提示，函数名记个大概即可。 | 
发表于 2011-1-30 15:48:17
