搜索
aardio官方社区 门户 查看主题

取得指定网页节点的方法归纳

发布者: lujjjh | 发布时间: 2011-1-30 15:48| 查看数: 21316| 评论数: 30|帖子模式

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


我们要使用 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有智能提示,函数名记个大概即可。

评分

参与人数 5银币 +45 收起 理由
sandorn + 5 很给力!
yeqiuliang + 10 赞一个!
aoqi521 + 10 很给力!
pigly + 10 很给力!
lyj141224 + 10

查看全部评分

最新评论

fantasynew 发表于 2011-1-30 17:19:42

非常感谢lujjjh的辛勤劳动!

非常感谢lujjjh的辛勤劳动!
xudhrh 发表于 2011-1-30 17:46:41

好东西,期待完善{:)}

好东西,期待完善
qqmmcc 发表于 2011-1-30 17:53:03

lujjjh 既是一个好学生也是一个好老师,将来成就不可限量,非常详细的文档教程,已收藏网站了,感谢指导!

lujjjh 既是一个好学生也是一个好老师,将来成就不可限量,非常详细的文档教程,已收藏网站了,感谢指导!

点评

“如果你是新手,我希望你不要收藏这个网址。我不希望你一碰到要取节点就回来复制、粘贴,不如现在按照上面的方法好好实践操作一下” 哈哈 老师的原话 你不乖哦 - -  发表于 2011-1-30 19:58
starx 发表于 2011-1-30 17:59:41

值得严重支持!

值得严重支持!
落伍者 发表于 2011-1-30 18:15:31

小版主的 教程都是精品

小版主的  教程都是精品
jsniu 发表于 2011-1-30 18:34:56

这个的确值得严重支持!热烈祝贺“aardio饭”隆重出台!

这个的确值得严重支持!热烈祝贺“aardio饭”隆重出台!
名墨风华 发表于 2011-1-30 22:12:29

非常实用。{:3_59:}

非常实用。
建站 发表于 2011-1-31 19:23:38

非常好,感谢版主无私奉献,还花钱购买空间域名免费教程,谢谢!

非常好,感谢版主无私奉献,还花钱购买空间域名免费教程,谢谢!
51ak 发表于 2011-2-1 22:00:39

感谢版主的风险,网站收录慢慢消化。

感谢版主的风险,网站收录慢慢消化。
开心果冻 发表于 2011-2-21 23:41:27

太好,正需要这个,新手专研中。。。谢谢了

太好,正需要这个,新手专研中。。。谢谢了
sj798 发表于 2011-4-10 09:46:26

站位支持,秋后观察

站位支持,秋后观察
hgbuser 发表于 2011-4-11 15:32:33

JQUERY的选择器无比强大,如果能将它打包成函数将非常方便

JQUERY的选择器无比强大,如果能将它打包成函数将非常方便
_______________ 发表于 2011-6-24 17:48:40

非常感谢!

非常感谢!
mfq1973 发表于 2011-11-10 16:24:39

正在学习这些,感谢中。。。。。

正在学习这些,感谢中。。。。。
vtf 发表于 2012-10-1 16:23:35

弱弱问一句:楼主给的链接还有效吗?我的怎么出现404错误?

弱弱问一句:楼主给的链接还有效吗?我的怎么出现404错误?
supersuke 发表于 2012-10-8 09:40:52

好资料,认真学习

好资料,认真学习
slowhand 发表于 2012-11-4 21:35:02

辛苦了,很是不错

辛苦了,很是不错
bob 发表于 2012-11-5 08:16:14

手机版上怎么没收藏按钮了

手机版上怎么没收藏按钮了来自: Android客户端
12下一页

手机版|未经许可严禁引用或转载本站文章|站长邮箱|aardio.com|aardio官方社区 ( 皖ICP备09012014号 )

GMT+8, 2017-9-25 19:20 , Processed in 0.078125 second(s), 22 queries , WinCache On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表