JavaScript如何检测重复ID

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《JavaScript 检测重复 ID 方法详解》，本文主要会讲到等等知识点，希望大家一起学习进步，也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧！

本文介绍如何使用 JavaScript 检测网页中是否存在重复的 Element ID。通过遍历所有带有 ID 属性的元素，并统计每个 ID 出现的次数，最终返回包含重复 ID 及其出现次数的列表。该方法能够帮助开发者快速定位页面中潜在的 ID 冲突问题，避免由此引发的各种错误。

在 HTML 中，ID 属性应该在整个文档中是唯一的。违反此规则可能导致 JavaScript 代码行为异常，因为 document.getElementById() 等方法依赖于 ID 的唯一性。本教程提供一个 JavaScript 函数，用于检测页面中是否存在重复的 Element ID，并返回重复 ID 及其出现次数的列表。

实现原理

该函数通过以下步骤实现：

1. 获取所有带有 ID 属性的元素： 使用 document.querySelectorAll('*[id]') 获取页面上所有带有 ID 属性的元素。
2. 遍历元素列表： 循环遍历获取到的元素列表，提取每个元素的 ID 值。
3. 统计 ID 出现次数： 使用数组 elementh 存储所有 ID，使用 elementsm 存储重复的 ID，使用 elementsmc 存储每个重复 ID 出现的次数。
4. 构建结果列表： 将重复的 ID 及其出现次数存储在一个数组 elementrv 中，每个元素是一个包含 id 和 length 属性的对象。
5. 返回结果： 如果没有重复的 ID，则返回字符串 "No Element ID duplicates!"；否则，返回包含重复 ID 信息的数组。

代码示例

function checkSameElementID(){

    var elementz = document.querySelectorAll('*[id]');

    var elementh = [];
    var elementsm = [];
    var elementsmc = [];
    var elementrv = [];

    elementz.forEach((elementx, index) => {

        var eleName = elementx.getAttribute("id");

        if(elementh.includes(eleName)){

            if(!elementsm.includes(eleName)){
                elementsm.push(eleName);
                elementsmc.push(2);
            }
            else{

                var posx = elementsm.indexOf(eleName);
                var updlengthx = elementsmc[posx] + 1;
                elementsmc[posx] = updlengthx;

            }


        }

        elementh.push(eleName);

    });

    elementsm.forEach((elementx, index) => {

        var lengthx = elementsmc[index];
        var namex = String(elementx);

        elementrv.push({'id': namex, 'length': lengthx});

    });

    if(elementsm.length == 0){
        elementrv = "No Element ID duplicates!";
    }

    return elementrv;

}

// 调用示例
var duplicates = checkSameElementID();
console.log(duplicates);

使用说明

1. 将上述 JavaScript 代码添加到你的 HTML 文件中，可以放在