刚才花了一些时间写的基础教程，由于篇幅和格式的问题，给一个纲要和链接。

我们要使用 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() 函数

怎么样，是不是很方便呢？赶紧试试看吧。

原文链接： https://bbs.aardio.com/forum.php?mod=viewthread&tid=940