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
  • asp之家 网络编程 m.aspxhome.com