经常会遇到一个页面中有相同定义相同id的情况,从道理上来说,id应该是这个页面中某个元素的唯一标识,所以不应该出现有相同id的情况,否则会产生意想不到的结果。而且各个浏览器的表现也是不一样的。我只做了ie6,chrome和firefox的测试。
代码如下:
function show(){
alert($('#aa').val());(情况一)
alert($('#a #aa').val());(情况二)
alert($('#b #aa').val());(情况二)
}
简单的总结一下:
1、在测试过的所有浏览器下,采用情况一下的方式,也就是直接用id取值的话,浏览器只会返回id相同的第一个元素的值。后面的值不会覆盖前面的值。
2、采用情况二的方式,也就是不同范围内的相同id取值,在ie6下返回的结果是第一个能找到,但是第二个返回的是undefined,也就是说找不到值。但是在chrome和firefox下是可以分别取到两个值的。这就是不同浏览器的区别。
综上所述,在一个页面里尽量的不要出现有相同id的元素
IE6.0的getElementsByName()和getElementById() bug
1、document.getElementsByName(name)
IE6.0中的bug:
会将id等于给定的name值的元素也返回。
function getCount(){
var objs=document.getElementsByName("myElement");
alert(objs.length);
}
myElement" name="aLink" href="http://www.baidu.com">baidu
myElement" value="button 1" type="button" />
myElement" value="button 2" type="button" />
myElement" value="button 3" type="button" />
结果:4
原因:IE6.0错误的将myElement">元素也返回了。
解决办法:一个元素的name属性值千万不要和其他任何元素的id值相同。此处建议讲的id值改为其他值。
2、 document.getElementById(id)
IE6.0中的bug:
如果给定的id匹配某个元素的name属性,IE6.0会错误返回这个元素(前提是该元素位于我们查找的目标元素之前)。
示例:
function getEle(){
var obj=document.getElementById("myElement");
alert(obj.id);
}
" οnclick="getEle()">click me
myElement" name="aLink" href="http://www.baidu.com">baidu
结果:button1
原因:button1的name值恰好等于给定的id值,且button1在a元素之前,IE6.0错误的返回了button1。
解决办法:一个元素的name属性值千万不要和其他任何元素的id值相同。
改变一下button和a的位置,如下:
function getEle(){
var obj=document.getElementById("myElement");
alert(obj.id);
}
myElement" name="aLink" href="http://www.baidu.com">baidu
" οnclick="getEle()">click me
结果:myElement
原因:IE6.0首先找到id为myElement的a元素,找到后立即就返回了。