js檢查頁面上有無重復id的實現代碼

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> js檢查頁面上有無重復id的實現代碼

js檢查頁面上有無重復id的實現代碼

編輯：JavaScript綜合知識

有時候我們需要檢查一個頁面上是否用重復的id，一般id都是唯一的，也方便控制，那麼就可以參考下面的代碼

方法一：

復制代碼代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript">
    window.onload = function(){
        var tags = document.getElementsByTagName("*"),
            count = tags.length, time, ret = {}, id;
        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>
<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>

方法二：

復制代碼代碼如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript">
    function createDiv(){
        var html = [], id;
        for(var i = 0; i < 2000; i++){
            id = "divId" + parseInt(Math.random() * 10000);
            html.push("<div id='" + id + "'>" + id + "</div>");
        }
        document.body.innerHTML = html.join("");
    }
    window.onload = function(){
        createDiv();

        var oID = {} , result = {}, arr = [],
            tags = document.getElementsByTagName("*");
        for(var i = 0, id; i < tags.length; i++){
            id = tags[i].id;
            if(id){
                oID[id] = oID[id] ? oID[id] + 1 : 1;
                if(oID[id] > 1){
                    result[id] = id + " " + oID[id]; } } } for(var o in result){
            arr.push(result[o]);
        }
        alert(arr.join("/t"));
    };
</script>
</HEAD>
<BODY>
</BODY>
</HTML>

JavaScript綜合知識

JavaScript常用全局屬性與方法記錄積累: 最近，在學習JavaScript，Java作域鏈包含全局，記錄下常用的全局屬性與方法，就當是知識的積
jquery的父子兄弟節點查找示例代碼: 這篇文章主要介紹了jquery的父子兄弟節點的查找方法,需要的朋友可以參考下　　jQuery.par
jquery 實現兩級導航菜單附效果圖: 兩級導航菜單在網頁中非常實用，實現的方法也有很多，本文為大家介紹下使用jquery是如何

JavaScript基礎知識 JSON基礎正則表達式關於JavaScript JavaScript技巧 jQuery入門知識 AJAX入門 JavaScript綜合知識

DIV CSS 佈局教程網

相關文章