当前位置: 首页 > 图文教程 > 网络编程 > Javascript > document.all与getElementById、getElementsByName、getElementsByTagName用法区别-getElementById

Javascript
JS教程:浅谈ECMAScript自动插入分号
JavaScript教程:几种比较熟悉的编程习惯
JS实例:登陆失败后跳出框架打开
webdesignledger推选的2009年度最佳jQuery插件
javaScript教程:以实例方式学习call函数
JS教程:词法作用域和闭包
表单验证中时间起止 如何做到递归处理
JS实例教程:当心JavaScript代码陷阱
Firebug技巧:脚本调试,选项卡和CSS调试
学习javascript:牛人的讲座视频和PPT
Clearbox 3:很酷的仿Lightbox脚本
JavaScript教程:详细解析网页图片预览效果
JS代码实例:实现随机加载不同的CSS样式
国人开发的比较优秀的js框架:como js
Webjx收集10个最常用Ajax技术的实例教程
JavaScript教程:优化次数过多的循环
出色的jQuery导航菜单的14个英文教程
JS教程:学习笔记之JS类
JS教程:详细讲解JS节点知识
COM中获取JavaScript数组大小的代码

Javascript 中的 document.all与getElementById、getElementsByName、getElementsByTagName用法区别-getElementById


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 334 ::
收藏到网摘: n/a

HTML DOM 定义了多种查找元素的方法,除了 getElementById() 之外,还有 getElementsByName() 和 getElementsByTagName()。 不过,如果您需要查找文档中的一个特定的元素,最有效的方法是 getElementById()。
不过要注意的是使用getElementById时对不同的浏览器执行的结果可能是不同的,以下有相关说明
复制代码 代码如下:

text1:
<input name="textName1" type="text" id="textName2" />
<br>
text2:
<input name="textName2" type="text" id="textName1" />
<br>
<input type="button" name="Submit" value="text1" onclick=alert(document.getElementById('textName2').value) />
<input type="button" name="Submit2" value="text2" onclick=alert(document.getElementById('textName1').value) />
我在IE中测试了上面的代码,在第一个文本框中输入1,在第二个文本框中输入2,然后点下面的两个按钮,猜一下结果是什么?
我本意是按钮1返回第一个文本框的值,按钮2返回个文本框的值。
结果是两个按钮都返回了第一个文本框的值。
说明ie执行document.getElementById(elementName)的时候,返回的是第一个name或者id等于elementName的对象,并不是按照ID来查找的。
在fireFox中不存在这样的问题,fireFox执行document.getElementById(elementName)的时候只查找id等于elementName的对象,如果不存在则返回null。
可能IE是考虑的兼容性的问题才这么做的。

以下是我测试所用的代码:
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

这个时候我在两个text中输入的值分别为:eee, www
IE中测试结果为:eee , eee
再看当我把<input type="text" name="aaa" id="ccc" >中的id去除时,也即上面代码使用注释中的内容时
我同样输入eee, www
IE中测试结果为:www ,eee
仔细分析上面两个测试的结果:得出结论是:每执行getElementById一次,会将web页面中的所有表单按顺序遍历一次,同时查找id,name两个值,如果存在所要找的id则不再继续查找,如果没有相应的id与之对应则看name值是否与之对应,如果有相应的name与之对应,则不再继续查找。也就是说:
ie执行document.getElementById(elementName)的时候,返回的是第一个name或者id等于elementName的对象,并不是仅按照ID来查找的。
而同样的两个测试在firefox下第一个结果为eee,www,而第二个结果因为没有找到id="ccc"所以返回null
对于这个结果还可参见
http://www.ruanchen.com/rticle/16852.htm
他还对getElementById与getElementByName进行了分析,值得一看。