js查找元素的方法

来源：互联网发布：谁有午夜福利软件编辑：程序博客网时间：2024/05/22 00:14

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

我在IE中测试了上面的代码，在第一个文本框中输入1，在第二个文本框中输入2，然后点下面的两个按钮，猜一下结果是什么？我本意是按钮1返回第一个文本框的值，按钮2返回个文本框的值。结果是两个按钮都返回了第一个文本框的值。说明ie执行document.getElementById(elementName)的时候，返回的是第一个name或者id等于elementName的对象，并不是按照ID来查找的。在fireFox中不存在这样的问题，fireFox执行document.getElementById(elementName)的时候只查找id等于elementName的对象，如果不存在则返回null。可能IE是考虑的兼容性的问题才这么做的。

源代码：

__________________________如下：__________________________________

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是考虑的兼容性的问题才这么做的。
<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
对于这个结果还可参见
http://www.jb51.net/article/16852.htm

1、document.getElementsByName(name)
IE6.0中的bug：
会将id等于给定的name值的元素也返回。
<script type="text/javascript">
function getCount(){
var objs=document.getElementsByName("myElement");
alert(objs.length);
}
</script>
<button id="button1" name="button1" onclick="getCount()">click me</button>
<a id="myElement" name="aLink" href="http://www.baidu.com">baidu</a>
<input id="btn1" name="myElement" value="button 1" type="button" />
<input id="btn2" name="myElement" value="button 2" type="button" />
<input id="btn3" name="myElement" value="button 3" type="button" />
结果：4
原因：IE6.0错误的将<a id="myElement">元素也返回了。
解决办法：一个元素的name属性值千万不要和其他任何元素的id值相同。此处建议讲<a>的id值改为其他值。
2、 document.getElementById(id)
IE6.0中的bug：
如果给定的id匹配某个元素的name属性，IE6.0会错误返回这个元素(前提是该元素位于我们查找的目标元素之前)。
示例：
<script type="text/javascript">
function getEle(){
var obj=document.getElementById("myElement");
alert(obj.id);
}
</script>
<button id="button1" name="myElement" onclick="getEle()">click me</button>
<a id="myElement" name="aLink" href="http://www.baidu.com">baidu</a>
结果：button1
原因：button1的name值恰好等于给定的id值，且button1在a元素之前，IE6.0错误的返回了button1。
解决办法：一个元素的name属性值千万不要和其他任何元素的id值相同。
改变一下button和a的位置，如下：
<script type="text/javascript">
function getEle(){
var obj=document.getElementById("myElement");
alert(obj.id);
}
</script>
<a id="myElement" name="aLink" href="http://www.baidu.com">baidu</a>
<button id="button1" name="myElement" onclick="getEle()">click me</button>
结果：myElement
原因：IE6.0首先找到id为myElement的a元素，找到后立即就返回了。
1、document.getElementsByName(name)
IE6.0中的bug：
会将id等于给定的name值的元素也返回。
<script type="text/javascript">
function getCount(){
var objs=document.getElementsByName("myElement");
alert(objs.length);
}
</script>
<button id="button1" name="button1" onclick="getCount()">click me</button>
<a id="myElement" name="aLink" href="http://www.baidu.com">baidu</a>
<input id="btn1" name="myElement" value="button 1" type="button" />
<input id="btn2" name="myElement" value="button 2" type="button" />
<input id="btn3" name="myElement" value="button 3" type="button" />
结果：4
原因：IE6.0错误的将<a id="myElement">元素也返回了。
解决办法：一个元素的name属性值千万不要和其他任何元素的id值相同。此处建议讲<a>的id值改为其他值。
2、 document.getElementById(id)
IE6.0中的bug：
如果给定的id匹配某个元素的name属性，IE6.0会错误返回这个元素(前提是该元素位于我们查找的目标元素之前)。
示例：
<script type="text/javascript">
function getEle(){
var obj=document.getElementById("myElement");
alert(obj.id);
}
</script>
<button id="button1" name="myElement" onclick="getEle()">click me</button>
<a id="myElement" name="aLink" href="http://www.baidu.com">baidu</a>
结果：button1
原因：button1的name值恰好等于给定的id值，且button1在a元素之前，IE6.0错误的返回了button1。
解决办法：一个元素的name属性值千万不要和其他任何元素的id值相同。
改变一下button和a的位置，如下：
<script type="text/javascript">
function getEle(){
var obj=document.getElementById("myElement");
alert(obj.id);
}
</script>
<a id="myElement" name="aLink" href="http://www.baidu.com">baidu</a>
<button id="button1" name="myElement" onclick="getEle()">click me</button>
结果：myElement
往来的游客记得评论一下哦！！