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

Javascript
为调试JavaScript添加输出窗口的代码
Js 中debug方式
一些mootools的学习资源
JavaScript 精粹读书笔记(1,2)
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
数组Array进行原型prototype扩展后带来的for in遍历问题
javascript 鼠标拖动图标技术
比较搞笑的js陷阱题
js 自定义的联动下拉框
js 省地市级联选择
JavaScript 类似flash效果的立体图片浏览器
JavaScript Event学习第九章 鼠标事件
jQuery AJAX回调函数this指向问题
toString()一个会自动调用的方法
jQuery 文本框模拟下拉列表效果
关于页面被拦截的问题
javascript 解析url的search方法
一个XML格式数据转换为图表的例子
Javascript 获取链接(url)参数的方法[正则与截取字符串]
一些收集整理非常不错的JS效果代码

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 219 ::
收藏到网摘: 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进行了分析,值得一看。