使用 JavaScript 检测页面中重复的元素 ID

本文提供了一个使用 JavaScript 检测网页中是否存在重复元素 ID 的方法。该方法通过查询所有带有 ID 属性的元素，然后遍历这些元素，统计每个 ID 出现的次数。最终，该方法返回一个包含重复 ID 及其出现次数的列表，或者提示没有重复 ID。该方法可以帮助开发者快速发现并解决页面中潜在的 ID 冲突问题。

在网页开发中，确保每个元素的 ID 属性是唯一的至关重要。重复的 ID 会导致 JavaScript 代码选择器失效，影响页面交互和功能。以下提供一个 JavaScript 函数，用于检测页面中是否存在重复的元素 ID，并返回重复 ID 及其出现次数。

实现方法

该方法的核心思路是：

1. 获取所有带有 ID 属性的元素： 使用 document.querySelectorAll('*[id]') 获取页面中所有带有 ID 属性的元素。
2. 遍历元素，统计 ID 出现次数： 遍历获取到的元素列表，将每个元素的 ID 存储到一个数组中，并统计每个 ID 出现的次数。
3. 返回重复 ID 列表： 将出现次数大于 1 的 ID 及其出现次数存储到一个新的数组中，并返回该数组。如果页面中没有重复的 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;

}

代码解释：

• document.querySelectorAll('*[id]'): 选取所有具有 id 属性的 HTML 元素。
• elementz.forEach((elementx, index) => { ... }): 循环遍历每一个选取的元素。
• elementx.getAttribute("id"): 获取当前元素的 id 属性值。
• elementh.includes(eleName): 检查 elementh 数组中是否已经存在当前元素的 id 值。elementh 数组用于记录所有已经遍历过的 id 值。
• elementsm.includes(eleName): 检查 elementsm 数组中是否已经存在当前元素的 id 值。elementsm 数组用于记录所有重复的 id 值。
• elementsmc[posx] = updlengthx: 更新 elementsmc 数组中对应 id 的计数。elementsmc 数组用于记录每个重复 id 出现的次数。
• elementrv.push({'id': namex, 'length': lengthx}): 将重复的 id 及其出现次数存储到 elementrv 数组中，最终返回。

使用方法

1. 将上述 JavaScript 代码复制到你的 HTML 页面中的
2. 在需要检测重复 ID 的地方调用 checkSameElementID() 函数。
3. 该函数会返回一个数组，其中包含重复的 ID 及其出现次数。你可以将该数组打印到控制台，或者在页面上显示出来。

示例：

This is my first div.
This is my second div.
This is another div.

在该示例中，myDiv ID 被重复使用，运行代码后，控制台将会输出包含 myDiv 及其出现次数的信息。

注意事项

• 该方法只检测当前页面中的重复 ID。如果你的页面中使用了 iframe，则需要分别在每个 iframe 中运行该方法。
• 该方法区分大小写。例如，myDiv 和 MyDiv 会被认为是不同的 ID。
• 在大型项目中，建议使用构建工具或代码检查工具来自动化 ID 重复检测，以提高开发效率和代码质量。

总结

本文提供了一个使用 JavaScript 检测页面中重复元素 ID 的方法。通过使用该方法，开发者可以快速发现并解决页面中潜在的 ID 冲突问题，从而提高代码质量和用户体验。记住，保持 ID 的唯一性是编写健壮、可维护的 Web 应用的关键。