如何檢測程式碼中是否有重複的id屬性

antzone發表於2017-03-10

按照w3c標準，在同一個頁面中，id屬性值是唯一的，如果頁面比較龐大的話，那麼人工檢測是否與重複的id屬性值將比較困難，下面是一段程式碼例項能夠實現快速檢測是否有重複id屬性值的功能，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
window.onload=function(){
  var tags=document.getElementsByTagName("*");
  var count=tags.length;
  var time;
  var ret={}
  var id;
  var time=new Date();
  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>
<div id="mayi">螞蟻部落一</div>
<div id="mayi">螞蟻部落二</div>
</body>
</html>

以上程式碼可以檢測頁面中重複的id屬性值，下面簡單介紹一下此效果的實現過程。

一.實現原理:

原理其實非常的簡單，就是獲取頁面文件中所有的標籤，然後判斷是否有id屬性，如果有的話就會判斷這個id是否已經存在於建立的自定義物件中，如果有的話，就彈出提示，否則將這個屬性值存入物件，屬性名稱就是id屬性值，屬性值是true，然後不斷迴圈判斷。

二.程式碼註釋:

1.window.onload=function(){}，當文件內容完全載入完成，再去執行函式中的程式碼。

2.var tags=document.getElementsByTagName("*")，獲取頁面的標籤集合。

3.var count=tags.length，獲取標籤的數量。

4.var time，宣告一個變數用於存放消耗的時間。

5.var ret={}，宣告一個物件用於存放id屬性值，物件的屬性是id屬性值，屬性值是true。

6.var id，宣告一個變數用於存放標籤的id屬性值。

7.var time=new Date()，獲取當前時間物件。

8.for(var i=0;i<count;i++)，使用for迴圈遍歷所有的標籤、

9.id=tags.id，獲取標籤的id屬性值。

10.if(id)，如果存在id屬性。

11.if(ret[id])，如果物件中已經存在已有的屬性值。

12.alert(id+"\n用時：" +(new Date()-time)+"秒")，彈出提示。

13.return，跳出函式的執行。

14.else{ret[id]=true;}，否則將id屬性值存入物件，屬性值為true。

15.alert("未找到相同ID")，如果沒有找到，就彈出提示。

相關文章