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

最新推荐文章于 2022-09-16 22:41:41 发布

luweifeng1983

最新推荐文章于 2022-09-16 22:41:41 发布

阅读量1.6k

点赞数

分类专栏： JavaScript应用篇文章标签：测试 javascript firefox button 浏览器 blog

本文链接：https://blog.csdn.net/luweifeng1983/article/details/3550665

版权

JavaScript应用篇专栏收录该内容

37 篇文章 0 订阅

订阅专栏

HTML DOM 定义了多种查找元素的方法，除了 getElementById() 之外，还有 getElementsByName() 和 getElementsByTagName()。

不过，如果您需要查找文档中的一个特定的元素，最有效的方法是 getElementById()。

不过要注意的是使用getElementById时对不同的浏览器执行的结果可能是不同的，以下链接有相关说明

http://blog.csdn.net/mmcgzs/archive/2007/03/25/1540250.aspx

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

 
 <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"  >-->
<input type="text" name="aaa" id="ccc" >
<input type="text" name="ccc" id="aaa">

<input type="button" name="bbb" value="click" οnclick="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

对于这个结果还可参见blog:

http://www.cnblogs.com/Jinglecat/archive/2006/10/18/532764.html

他还对getElementById与getElementByName进行了分析，值得一看。

luweifeng1983

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
document.all与getElementById、getElementsByName、getElementsByTagName用法区别-getElementById

HTML DOM 定义了多种查找元素的方法，除了 getElementById() 之外，还有 getElementsByName() 和 getElementsByTagName()。不过，如果您需要查找文档中的一个特定的元素，最有效的方法是 getElementById()。不过要注意的是使用getElementById时对不同的浏览器执行的结果可能是不同的，以下链接有相关说明http:
复制链接

扫一扫