盛大面试题：js检查页面上有无重复id（可用框架jquery，加分后重发）

只需检查即可，一旦有重复的即alert()出重复项。请在回帖里附上执行时间，谢谢
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
window.onload = function(){
  var time1 = new Date();
  //var a = 执行代码，返回第一个重复的id;
  var time2 = new Date();
  var time = time2 - time1;
  alert("用时" + time + "毫秒");
  //alert(a);
}
</script>
</head>
<body>
<script>
var html = [];
for(var i = 0; i < 1000; i++){
html.push("<div id='a" + i + "'>" + i+ "</div>");
}
document.body.innerHTML = html.join("");
</script>
<div id="a50">此乃重复项</div>
</body>
</html>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

document.getElementById根据id获取DOM对象时，如果有多个同名id，获取的是第一个该id的DOM对象
获取所有标签后，逆序遍历判断该DOM元素o与document.getElementById（o.id）是不是同一个DOM元素，是就继续，不是就说明id重复了。<html>
<body><div id="R1">1</div><div id="R1">2</div><div id="R1">3</div><div id="R1">4</div><div id="R1">5</div><script type="text/javascript">
var tags = document.getElementsByTagName("*");
for(var i = tags.length-1; i > -1; i--)
{
     var o = tags[i];
     var id = o.id;
     if (id && document.getElementById(id) != o)
     {
            alert(id+"重复了");
            break;
     }
}
if(i==-1){alert("没出现相同id")}</script></body>
</html>
这里没考虑IE下document.getElementById混淆name和id属性BUG的情况
不过id和name会混淆应该是属于不提倡的写法，可以避免。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;" />
<script>
window.onload = function(){
var a = "";
var time1 = new Date();//var a = 执行代码，返回第一个重复的id;
var tags = document.getElementsByTagName("*");
for(var i = tags.length-1; i > -1; i--)
{
     var o = tags[i];
     var id = o.id;
     if (id && document.getElementById(id) != o)
     {
            a = id;
            break;
     }
}var time2 = new Date();
var time = time2 - time1;
alert(time);
alert(a);
}
</script>
</head>
<body>
<script>
var html = [];
for(var i = 0; i < 1000; i++){
html.push("<div id='a" + i + "'>" + i+ "</div>");
if (i==50) {html.push("<div id='a" + i + "'>" + "此乃重复项"+ "</div>");
}
}
document.body.innerHTML = html.join("");
</script>

</body>
</html>
把LZ的测试代码改了下，可以随意指定重复项的位置然后测试结果
IE6:      297ms
FF3.6:    5ms无其他浏览器结果。。
var tags = document.getElementsByTagName("*");
var j = 0;
for(var i = tags.length-1; i > -1; i--)
{
     var o = tags[i];
     var id = o.id;
     if (id && document.getElementById(id) != o)
     {
j++;
            alert(id+"重复了"+j+"次");
            //break;
     }else{

}
}
IE下:0 - 16 ms
FF下:5 - 14 ms
根据插入位置不同，时间有点不一样<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <script type="text/javascript">
window.onload = function(){
time = new Date();
var tags = document.getElementsByTagName("*"),
count = tags.length, time, ret = {}, id;
for(var i = 0; i < count; i++){
id = tags[i].id;
if(id){
if(ret[id]){
alert(id + "\n用时：" + (new Date() - time));
return;
}else{
ret[id] = true;
}
}
}
alert("未找到相同ID");
}
  </script>
</HEAD> <BODY>
  <script type="text/javascript">
(function(){
var html = [], rnd = parseInt(Math.random() * 1000);
for(var i = 0; i < 1000; i++){
html.push("<div id='a" + i + "'>" + i + "</div>");
};
//在随机位置插入一个随机的id
i = parseInt(Math.random() * 1000);
html[i] = html[i] + ("<div id='a" + rnd + "'>" + rnd + "</div>");
document.write(html.join(""));
})();
  </script>
</BODY>
</HTML>
var eles = document.all;
for (var i = 0; i < eles.length; i++) {
     if (eles[i].id != "") {
       var idp = eles[i].id;
       var len = $("[id=" + idp + "]").size();
       if (len > 1) {
         alert("页面有重复的ID");break; }
                    }
                }
我也来写一个看看：
var el = document.all;
vat d = new ActiveXObject("Scripting.Dictionary");
for (var i = 0; i < el.length; i++) {
  if (el[i].id != "") {
if (d.Exists(el[i].id)){
alert("有重复id")
return alert("有重复id")
}else{
d.add(el[i].id,"")
}
}
}
用jQuery的例子
效率和你的文档复杂程度相关  <script src="./jquery-1.3.1.js" type="text/javascript"></script>
  <script type="text/javascript">
   // boolean checkDupID( String who )
   // who为需要检查的元素id
function checkDupID( who ) {
var selector = ":not(:not("+"'#"+who+"'))";
// $(selector).length 对应当前ID存在的情况
// =0 不存在
// =1 存在单个元素
// >n 存在n个元素

// 可以看到具体是哪些元素重复了
// $(selector).each( function() { alert(this.nodeName+":"+this.id+":"+this.innerHTML); });

if( $(selector).length > 1 ) {
return true;
}
}
   $(document).ready(function(){
if( checkDupID( "p2" ) )
alert( "id重复" );
else alert( "id不重复" );
});
  </script>
  <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script>$(document).ready(function() {
var time1 = new Date();
var selectorLen = $("div[id=a50]").size();
var obj;
if (selectorLen > 1) {
  obj = $("div[id=a50]:eq(0)");
} else {
  obj = null;
}
//var a = 执行代码，返回第一个重复的id;
var time2 = new Date();
var time = time2 - time1;
alert("用时" + time + "毫秒");
alert("重复的那个控件信息为: " + obj.html() + "\r\n ID为：" + obj.attr("id"));
});</script>
var tags=document.body.getElementsByTagName("*");
var ids={};
for(var i=0,len=tags.length;i<len;i++){
if(tags[i]){
if(tags[i].id in ids) {alert("repeat");break;}
else ids[tags[i].id]='';
}
}酷睿 2.2G CPU
IE8 800左右
FF 800左右
IE onlyvar all=document.documentElement.outerHTML;
var str=all.match(/id=[^s\>]*/ig);
var arr=str.sort();
for(var i=0;i<arr.length-1;i++){
   if(arr[i]==arr[i+1]) document.write("重复"+arr[i]);
}
好题目.做了一下, 比上面几位的稍微快点IE6     15ms
ff3.0   7ms电脑比较旧了.<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<script>
var html = [];
for(var i = 0; i < 1000; i++){
html.push("<div id='a" + i + "'>" + i+ "</div>");
}
document.body.innerHTML = html.join("");
</script>
<div id="a50">此乃重复项</div>
</body>
</html><script>
var d = new Date
var nodes = document.getElementsByTagName("*");
for (var i = 0, c; c = nodes[i++];){
if (c.id){
var id = c.id;
c.parentNode.removeChild(c);
if (document.getElementById(c.id)){
                     alert (new Date - d)
alert (id) }
}
}</script>
关键是大家记不记得我们最常用的方法 document.getElementById()的解释.返回第一个ID匹配的元素, 我们先移除第一个, 如果还存在这个ID匹配的元素, 那必定就出现了ID重复的情况.
赞    23楼的同学
<script type="text/javascript">
window.onload=function(){
var t1=new Date();
var tags=document.getElementsByTagName('*')
var len=tags.length
var id;
for(var i=0; i<len;i++){
if(tags[i].id!=''){
id=tags[i].id;
tags[i].id=id+i
if(document.getElementById(id)){
var t2=new Date();
document.getElementById('inner').innerHTML=('重复id:'+id+'     时间：'+(t2-t1))
break;
}else{
tags[i].id=id
}
}
}

}
</script>
  if (id && document.getElementById(id) != o)这句语法哪个大哥能解释下？
id 和 document.getElementById(id) != o 能做并且？
如果标签存在Id属性并且当前的Tag和用当前tag的Id取到的第一个对象是不是同一个对象
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
window.onload = function(){
var time1 = new Date();
var tags=document.getElementsByTagName("*");
var ids=new Array();
var repeatId=""
for(var i=0,len=tags.length;i<len;i++){
if(tags[i]&&tags[i].id){
if(typeof(ids[tags[i].id])!="undefined"){
ids[tags[i].id]=1
}
if(ids[tags[i].id]==1){
repeatId=tags[i].id;
break;
}
}
}
//var a = 执行代码，返回第一个重复的id;
var time2 = new Date();
var time = time2 - time1;
alert("用时" + time + "毫秒");
alert("重复项==="+repeatId);
}
</script>
</head>
<body>
<script>
var html = [];
for(var i = 0; i < 1000; i++){
html.push("<div id='a" + i + "'>" + i+ "</div>");
}
document.body.innerHTML = html.join("");
</script>
<div id="a50">此乃重复项</div>
</body>
</html>
IE7 32毫秒
FF2.0 47毫秒
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
window.onload = function(){
var time1 = new Date();
var tags=document.getElementsByTagName("*");
var ids=new Array();
var repeatId=""
for(var i=0,len=tags.length;i<len;i++){
if(tags[i]&&tags[i].id){
if(typeof(ids[tags[i].id])!="undefined"){
ids[tags[i].id]=1
}else{
ids[tags[i].id]=0;
}
if(ids[tags[i].id]==1){
repeatId=tags[i].id;
break;
}
}
}
//var a = 执行代码，返回第一个重复的id;
var time2 = new Date();
var time = time2 - time1;
alert("用时" + time + "毫秒");
alert("重复项==="+repeatId);
}
</script>
</head>
<body>
<script>
var html = [];
for(var i = 0; i < 1000; i++){
html.push("<div id='a" + i + "'>" + i+ "</div>");
}
document.body.innerHTML = html.join("");
</script>
<div id="a50">此乃重复项</div>
</body>
</html>
上一个发错了。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
var hash = {};
var repeatids = [];
window.onload = function(){
var time1 = new Date();
var tags=document.getElementsByTagName("*");
for(var i=0,len=tags.length;i<len;i++){
if(tags[i]&&tags[i].id){
if(!hash[tags[i].id])hash[tags[i].id] = true;
else repeatids.push(tags[i].id);
}
}
alert("用时" + (new Date() - time1) + "毫秒\n重复项==="+repeatids.join(','));
}
</script>
</head>
<body>
<script>
var html = [];
for(var i = 0; i < 1000; i++){
html.push("<div id='a" + i + "'>" + i+ "</div>");
}
document.body.innerHTML = html.join("");
</script>
<div id="a50">此乃重复项</div>
<div id="a90">此乃重复项</div>
<div id="a910">此乃重复项</div>
<div id="a999">此乃重复项</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>盛大面试题：js检查页面上有无重复id（可用框架jquery）</title>
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
</head><body>
<p><a href="#">1</a></p>
<p id="id_1"><a href="#">1</a></p>
<p><a href="#">1</a></p>
<p><a href="#">1</a></p>
<p id="id_2"><a href="#">1</a></p>
<p><a href="#">1</a></p>
<p><a href="#">1</a></p>
<p id="id_1"><a href="#">1</a></p>
<p id="id_2"><a href="#">1</a></p>
<p><a href="#">1</a></p>
<p id="id_1"><a href="#">1</a></p>
<p><a href="#">1</a></p>
<p id="id_1"><a href="#">1</a></p>
<p id="id_3"><a id="id_1" href="#">1</a></p>
<p><a href="#">1</a></p>
<p><a href="#">1</a></p>
    <script type="text/javascript">
var s_timer = new Date();
jQuery(function($) {
var idsStr = '';
$('body *:not("script")').each(function(i) {
var id = $(this).attr('id');
if(id) {
if(idsStr.indexOf(id) == -1) {
idsStr += id + ',';
} else {
alert('pos:'+i+', id='+id+'重复了，信息：\n\r tag='+this.nodeName+',\n\r innerHtml='+$(this).html());
};
};
});
});
var e_timer = new Date();
alert('花费时间：'+(e_timer - s_timer));
</script>
</body>
</html>
欢迎访问：http://www.ihiro.org/，交流！！！