一个页面中有相同ID元素 和 一个页面中一个元素的name值 和另外一个元素的ID值相同--在低版本IE下的问题。

经常会遇到一个页面中有相同定义相同id的情况，从道理上来说，id应该是这个页面中某个元素的唯一标识，所以不应该出现有相同id的情况，否则会产生意想不到的结果。而且各个浏览器的表现也是不一样的。我只做了ie6，chrome和firefox的测试。

代码如下：

<div id="a"><input type="text" id="aa" value="aaaaaaaa"/></div>

<div id="b"><input type="text" id="aa" value="bbbbbbbbb"/></div>

<input type="button" οnclick="show()" value="click here" />

<script type="text/javascript" src="http://qustliuyongjie.blog.163.com/blog/jquery.min.js"></script>

<script type="text/javascript">

function show(){

    alert($('#aa').val());（情况一）

    alert($('#a #aa').val());（情况二）

    alert($('#b #aa').val());（情况二）

}

</script>

简单的总结一下：

1、在测试过的所有浏览器下，采用情况一下的方式，也就是直接用id取值的话，浏览器只会返回id相同的第一个元素的值。后面的值不会覆盖前面的值。

2、采用情况二的方式，也就是不同范围内的相同id取值，在ie6下返回的结果是第一个能找到，但是第二个返回的是undefined，也就是说找不到值。但是在chrome和firefox下是可以分别取到两个值的。这就是不同浏览器的区别。

综上所述，在一个页面里尽量的不要出现有相同id的元素

 

IE6.0的getElementsByName()和getElementById() bug

 

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" οnclick="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" οnclick="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" οnclick="getEle()">click me</button>

结果：myElement

原因：IE6.0首先找到id为myElement的a元素，找到后立即就返回了。