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

Javascript
jquery 弹出层实现代码
jQuery 扩展对input的一些操作方法
扩展jQuery 键盘事件的几个基本方法
Iframe 自适应高度并实时监控高度变化的js代码
CCPry JS类库 代码
jquery text()要注意啦
json 入门基础教程 推荐
json 实例详细说明教程
JavaScript中的JSON 中文版翻译
javascript GUID生成器实现代码
DOM 脚本编程中的兄弟节点
JavaScript Sort 表格排序
提高网站性能之 如何对待JavaScript
js 函数的执行环境和作用域链的深入解析
键盘 keycode的值 javascript时触发事件时很有用的要素
cnblogs csdn 代码运行框实现代码
简单实用的HTML到UBB转换脚本工具实现说明
Javascript结合css实现网页换肤功能
JQuery 网站换肤功能实现代码
JS OOP包机制,类创建的方法定义

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


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