Javascript访问html页面的控件

======================================================
注：本文源代码点此下载
======================================================

这段时间在公司比较的空闲,决定研究研究javascript访问html控件,这是很普遍的,这里我系统的研究javascript的访问方式,测试通过并有下面一些研究成就,供大家分享和补充。下面切入正题:

访问控件的主要对象是:document对象。分别对应当前文档所有的(子对象)个人观点。并且已经提供的几个主要方法来访问对象。

1.document.getelementbyid

2.document.getelementsbyname

3document.getelementsbytagname

4document.all

下面我主要谈谈以上几个方法的具体用法:

一.首先我来谈谈document.getelementbyid的用法。

var obj=document.getelementbyid(“id”) 根据指定的id属性值得到对象。返回id属性值等于id的第一个对象的引用。假如对应的为一组对象,则返回该组对象中的第一个。

)”)”我在ie中测试了上面代码,在第一个文本框中输入1,在第二个文本中输入2,然后点击两个按钮,大吃一斤。结果两个按钮都返回了第一个文本框的值。这说明了ie执行document.getelementbyid(elementname)的时候,返回的是第一个name或者id等于elementname的对象,并不是根据id来查找的。

但相反我在firefox中就不存在这个问题。firefox执行document.getelementbyid(elementname)的时候只能查找id等于elementname对象,如果不存在在返回null.

二.下面看看document.getelementsbyname的用法。

var obj=document.getelementsbyname(“name”)根据name属性的值获取对象集合。返回name等于指定name对象的集合。注意这里返回的是一个集合,包括只有一个元素的情况也是一个集合。

document.getelementsbyname("name")[0?1?2?3?....] 这样来获取某一个元素。注意javascript中的集合取一个值可以用[],也可以用(),(本人测试通过,但没有资料这么写)。

如:

三.document.getelementsbytagname的用法:

var ojbs=document.getelementsbytagname(“tag”)根据基于指定元素名称对象的集合。返回tag属性等于指定tag标记的集合。这里也返回的是一个集合。(同上)

四.document.all用法。

document.all是页面内所有元素的一个集合。例如:

document.all(0)表示页面的第一个元素。

document.all(“txt”)表示页面上id或name等于txt的所有对象的单个元素和集合元素。

如果页面上的id或name等于txt只有一个元素(包括name和id情况),那么document.all()的结果就只是一个元素,反之就是获取一个集合。(综合了document.getelementbyid和document.getelementsbyname的各自的特点)。

也可以这样写:document.all.txt也是一样。

例如:

代码2:

但是常常name可以相同(如:用checkbox取用户的多项爱好的情况)

理论上一个页面中的id是互不相同的,如果出现不同的tags而有相同的id的话,document.all.id就会失败,就象这样:

所以说遇到了这种情况的话用下面这种写法:

另外document.all可以判断浏览器的种类是否是ie,

document.all---------针对ie

document.layers------------针对netscape

这两个集合.all只在ie里面有效,layers只在nc里面有效

所以就可以通过这个方式来判断不同的浏览器。

最后我来说说getelementbyid和getelementsbyname使用范围:

id就像身份证号,是唯一的,name就像姓名一样可以同名。

一个元素定义了id,引用该元素时直接用id属性,而name通常用在form中,且必须由document.form.***而来,也就是说,name 属性定义的元素在脚本中是document 对象的子对象。

1. name用于form内元素,提交需要.

id用于form外元素好用因为dom能直接取得单一元素

2.id 每页只能有一个

name 可以有多个 name有些标签不推荐用它

3. 表单元素(form input textarea select)与框架元素(iframe frame) 用 name这些元素都与表单(框架元素作用于form的target)提交有关, 在表单的接收页面只接收有name的元素 ,赋id 的元素通过表单是接收不到值的, 你自己可以验证一下有一个例外a 可以赋 name 作为锚点, 也可以赋 id;只能赋id不能赋name的元素:(除去与表单相关的元素都只能赋id)body litabletrtdthpdivspanpredldtddfontb等等。

这里我引出另一个问题,既然有了id那为什么还要name呢?

最直接答案:id就像是一个人身份证号,而 name就像是他的名字,id虽然是唯一的,但name是可以重复的。

具体来说:对于id来说,它就是client端html元素的identity 。而name 其实要复杂的多,因为name有很多种的用途,所以它并不能完全由id来代替,从而将其取消掉。

参考网站资料如下:具体用途有:

用途1:作为可与服务器交互数据的html元素的服务器端的标示,比如input、select、textarea、和button等。我们可以在服务器端根据其name通过request.params取得元素提交的值。用途2:html元素inputtype= "radio "分组,我们知道radiobutton控件在同一个分组类,check操作是mutex的,同一时间只能选中一个radio,这个分组就是根据相同的name属性来实现的。

用途3:建立页面中的锚点,我们知道link是获得一个页面超级链接,如果不用href属性,而改用name,如:,我们就获得了一个页面锚点。

用途4:作为对象的identity,如applet、object、embed等元素。比如在applet对象实例中,我们将使用其name来引用该对象。

用途5:在img元素和map元素之间关联的时候,如果要定义img的热点区域,需要使用其属性usemap,使usemap="#name"(被关联的map元素的name)

用途6:某些特定元素的属性,如attribute,和param。例如为object定义参数

.

显然这些用途都不是能简单的使用 id来代替掉的,所以html元素的id和name的却别并不是身份证号码和姓名这样的区别,它们更本就是不同作用的东西。 当然html元素的name属性在页面中也可以起那么一点id的作用,因为在dhtml对象树中,我们可以使用 document.getelementsbyname 来获取一个包含页面中所有指定name元素的对象数组。

在这里顺便说一下,要是页面中有n(n >1) 个html元素的id都相同了怎么办?在 dhtml对象中怎么引用他们呢?如果我们使用aspx页面,这样的情况是不容易发生的,因为 aspnet进程在处理aspx 页面时根本就不允许有id非唯一,这是页面会被抛出异常而不能被正常的render。要是不是动态页面,我们硬要让id重复那ie怎么搞呢?

这个时候我们还是可以继续使用document.getelementbyid获取对象,只不过我们只能获取id重复的那些对象中在html render时第一个出现的对象。而这时重复的id会在引用时自动变成一个数组,id重复的元素按 render的顺序依次存在于数组中。

getelementbyid("xxx")返回第一个id属性为"xxx"或者特定表单元素name为"xxx"的元素

getelementsbyname("xxx")返回所有id属性为"xxx"或者特定表单元素name为"xxx"的元素

这里要说明一下其实getelementbyid和getelementsbyname取元素的范围是一样的,区别只是前者只返回第一个元素后者返回所有元素的集合

另外说明一下表单元素 表单元素指的是在标签中数据可以被提交给服务器的标签

主要有三个标签 这三个标签只有在name属性不为空的时候才能将数据提交给服务器 所以这三种标签多定义了一个name属性 其实这个name属性和id属性是完全一样的都可以定位元素

如果不是表单元素 就算你加了name属性getelementsbyname也取不到不信你自己试试.

由于本人能力有限,希望朋友们能够及时的指出不正确的地方并及时留言我好修正,本人万分感谢!

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/