一个页面有相同ID元素的情况分析

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

经常会遇到一个页面中有相同定义相同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" onclick="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的元素。另外，当有相同id的元素时，如果要使用JS/JQuery的函数（innerHTML()、text()等）对id所在元素进行操作，js函数无法使用。