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

不过，如果您需要查找文档中的一个特定的元素，最有效的方法是 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是考虑的兼容性的问题才这么做的。

以下是我测试所用的代码：

document.all test

function view()
{
var obj = document.getElementById("ccc");
alert(obj.value);
obj = document.getElementById("aaa");
alert(obj.value);
}

[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
对于这个结果还可参见
http://www.jb51.net/article/16852.htm
他还对getElementById与getElementByName进行了分析，值得一看。

赞 (0)

相关推荐

  • document.all与getElementById、getElementsByName、getElementsByTagName用法区别-getElementById

    不过,如果您需要查找文档中的一个特定的元素,最有效的方法是 getElementById(). 不过要注意的是使用getElementById时对不同的浏览器执行的结果可能是不同的,以下有相关说明 复制代码 代码如下: text1: <input name="textName1" type="text" id="textName2" /> <br> text2: <input name="textName2

  • document.all与getElementById、getElementsByName、getElementsByTagName用法区别-document.all第1/2页

    理解这句话可看以下: 例1(这个可以让你理解文档中哪些是对象) Document.All Example Example Heading This is a paragraph. It is only a paragraph. Yet another paragraph. This final paragraph has special emphasis. [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 输出结果: 复制代码 代码如下: Example Heading This is

  • 全面解析jQuery中的$(window)与$(document)的用法区别

    [window对象] 它是一个顶层对象,而不是另一个对象的属性,即表示浏览器中打开的窗口.   1.属性 defaultStatus 缺省的状态条消息 document 当前显示的文档(该属性本身也是一个对象) frame 窗口里的一个框架((FRAME>)(该属性本身也是一个对象) frames array 列举窗口的框架对象的数组,按照这些对象在文档中出现的顺序列出(该属性本身也是一个 对象) history 窗口的历史列表(该属性本身也是一个对象) length 窗口内的框架数 locat

  • 数据库SQL中having和where的用法区别

    "Where" 是一个约束声明,使用Where来约束来之数据库的数据,Where是在结果返回之前起作用的,且Where中不能使用聚合函数. "Having"是一个过滤声明,是在查询返回结果集以后对查询结果进行的过滤操作,在Having中可以使用聚合函数. 聚合函数,SQL基本函数,聚合函数对一组值执行计算,并返回单个值.除了 COUNT 以外,聚合函数都会忽略空值. 聚合函数经常与 SELECT 语句的 GROUP BY 子句一起使用. Transact-SQL编程

  • PHP中exec与system用法区别分析

    本文实例讲述了PHP中exec与system用法区别,分享给大家供大家参考之用.具体方法如下: 一般来说,在PHP中调用外部命令,可以用exec及system来实现: system() 原型:string system (string command [, int return_var]) system()函数很其它语言中的差不多,它执行给定的命令,输出和返回结果.第二个参数是可选的,用来得到命令执行后的状态码. 返回结果: 成功返回0,   失败(命令不存在等原因)   返回   非0值 ex

  • 浅析php静态方法与非静态方法的用法区别

    在php编程中,static关键字声明一个属性或方法是和类相关的,而不是和类的某个特定的实例相关,因此,这类属性或方法也称为"类属性"或"类方法" 如果访问控制权限允许,可不必创建该类对象而直接使用类名加两个冒号"::"调用. static关键字可以用来修饰变量.方法. 不经过实例化,就可以直接访问类中static的属性和static的方法. static 的属性和方法,只能访问static的属性和方法,不能类访问非静态的属性和方法.因为静态属性

  • JavaScript常用截取字符串的三种方式用法区别实例解析

    stringObject.substring(start,stop) 用于提取字符串中介于两个指定下标之间的字符. start必需.一个非负的整数,规定要提取的子串的第一个字符在 stringObject 中的位置. stop可选.一个非负的整数,比要提取的子串的最后一个字符在 stringObject 中的位置多 1.如果省略该参数,那么返回的子串会一直到字符串的结尾. start从0开始 到stop(不包含stop)结束 不接受负的参数. stringObject.substr(start,

  • mysql中left join设置条件在on与where时的用法区别分析

    mysql中left join设置条件在on与where时的用法区别分析

    本文实例讲述了mysql中left join设置条件在on与where时的用法区别.分享给大家供大家参考,具体如下: 一.首先我们准备两张表来进行测试. CREATE TABLE `a` ( `id` int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT 'ID', `name` varchar(32) DEFAULT '' COMMENT '名称', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET

  • JavaScript中break、continue和return的用法区别实例分析

    本文实例讲述了JavaScript中break.continue和return的用法区别.分享给大家供大家参考,具体如下: break 停止了这个for循环,跳出循环来继续执行fn函数里之后的语句  function fn() { for(var i = 0; i < 5; i++) { if(i == 3) { break; } console.log(i); } console.log("ha") } fn();//0 1 2 ha continue 只是停止了当前循环,继续

  • Android Studio3.6中的View Binding初探及用法区别

    参考翻译:https://developer.android.google.cn/topic/libraries/view-binding View Binding是一项功能,使您可以更轻松地编写与视图交互的代码.在模块中启用视图绑定后,它将为该模块中存在的每个XML布局文件生成一个绑定类.绑定类的实例包含对在相应布局中具有ID的所有视图的直接引用.  在大多数情况下,视图绑定替换findViewById. 设置说明 ​ 视图绑定在Android Studio 3.6 Canary 11+中可用

随机推荐