document.all与getElementById、getElementsByName、getElementsByTagName用法区别-getElementById
时间：2024-05-22 10:35:58
不过，如果您需要查找文档中的一个特定的元素，最有效的方法是 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是考虑的兼容性的问题才这么做的。
以下是我测试所用的代码：
<html> <head> <title> document.all test </title> <script language="javascript"> function view() { var obj = document.getElementById("ccc"); alert(obj.value); obj = document.getElementById("aaa"); alert(obj.value); } </script> </head> <body> <form name="form1" id="f1"> <input type="text" name="aaa" id="ccc" > <input type="text" name="ccc" id="aaa"> <input type="button" name="bbb" value="click" onclick="view();"> </form> </body> </html>
这个时候我在两个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.aspxhome.com/article/16852.htm
他还对getElementById与getElementByName进行了分析，值得一看。
标签：document.all,getElementById,getElementsByName,getElementsByTagName
0
投稿猜你喜欢
selenium中常见的表单元素操作方法总结
2021-06-15 23:54:32
python中用ctypes模拟点击的实例讲解
2023-10-29 23:18:42
Python global全局变量函数详解
2023-02-02 07:00:17
详解Python中的时间格式的读取与转换(time模块)
2021-01-09 17:02:38
javascript 改变字体大小方法集合
2023-07-06 16:58:02
AMP Tensor Cores节省内存PyTorch模型详解
2021-07-08 01:30:32
用AspJpeg调整文字水印透明，生成图片水印的效果
2008-12-29 19:43:00
Pandas读取csv时如何设置列名
2023-11-25 19:54:55
vue中的stylus及stylus-loader版本问题
2023-07-02 16:32:20
sql server常用命令行操作(启动、停止、暂停)
2012-01-05 19:02:48
跟老齐学Python之dict()的操作方法
2022-05-12 16:54:43
MySQL中in和exists区别详解
2024-01-19 20:55:10
浅谈MySql整型索引和字符串索引失效或隐式转换问题
2024-01-15 20:41:39
Pytorch 如何训练网络时调整学习率
2022-01-31 20:08:48
Dreamweaver MX弹出窗口全攻略
2010-09-05 21:14:00
微信小程序基于数据库时间实现商品倒计时功能(可重用代码)
2024-01-16 06:05:38
教你如何使用Python selenium
2022-05-15 11:13:50
关于Python turtle库使用时坐标的确定方法
2021-06-21 14:46:24
Django自定义全局403、404、500错误页面的示例代码
2021-07-27 20:03:33
页面内查找
2023-07-02 05:25:46