document.all与getElementById、getElementsByName、getElementsByTagName用法区别-getElementById
更新时间：2008年12月19日 13:14:08 作者：
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 全选 注:引入外部Js需再刷新一下页面才能执行]
这个时候我在两个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
对于这个结果还可参见
https://www.jb51.net/article/16852.htm
他还对getElementById与getElementByName进行了分析，值得一看。
不过要注意的是使用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 全选 注:引入外部Js需再刷新一下页面才能执行]
这个时候我在两个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
对于这个结果还可参见
https://www.jb51.net/article/16852.htm
他还对getElementById与getElementByName进行了分析，值得一看。
相关文章
这个仿163网盘无刷新文件上传系统，并没有用使用.net的控件，完全的手工制作。2008-10-10
本文分享了利用javascript验证香港身份证的格式或真实性的代码，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要为大家详细介绍了原生js编写贪吃蛇小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
这篇文章主要介绍了js中如何将多层嵌套的数组转换为一层数组问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了微信小程序的授权实现过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
这篇文章主要介绍了EditPlus 正则表达式 实战(3)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-12-12
javascript和其他编程语言相比比较随意，所以javascript代码中充满各种奇葩的写法，有时雾里看花，当然，能理解各型各色的写法也是对javascript语言特性更进一步的深入理解。这篇文章主要给大家介绍了关于JavaScript中立即执行函数的相关资料，需要的朋友可以参考下。2017-11-11
在做网站的时候，往往图片的处理很重要，固定尺寸容易变形拉伸，不固定又会有不可预知的问题，有可能撑开页面。2009-08-08
运用HTML、CSS以及Javascript相关知识，编写多窗口多菜单的内容联动，具体思路及代码如下，感兴趣的朋友可以参考下哈，希望大家有所帮助2013-05-05
本文主要介绍了JavaScript提取元素中第一个子元素的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
最新评论