检测页面重复ID的JS方法及使用说明

本文介绍了如何使用 JavaScript 检测网页中重复的元素 ID，这对于保证网页的 HTML 规范性和避免潜在的 JavaScript 代码选择器失效至关重要。通过 `document.querySelectorAll('[id]')` 获取所有带 ID 属性的元素，然后统计每个 ID 出现的次数，最后返回重复的 ID 列表。文章提供了两种实现方法，一种简洁明了，另一种更详细地展示了如何统计重复 ID 的数量，并附带了完整的代码示例和使用方法，方便开发者快速集成到自己的项目中，有效提升网页的稳定性和用户体验。强调了在网页开发中 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 页面中的