JavaScript 教程：检测页面中重复的 Element ID_技术教程

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

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

实现原理

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

获取所有带有 ID 属性的元素： 使用 document.querySelectorAll('*[id]') 获取页面上所有带有 ID 属性的元素。
遍历元素列表： 循环遍历获取到的元素列表，提取每个元素的 ID 值。
统计 ID 出现次数： 使用数组 elementh 存储所有 ID，使用 elementsm 存储重复的 ID，使用 elementsmc 存储每个重复 ID 出现的次数。
构建结果列表： 将重复的 ID 及其出现次数存储在一个数组 elementrv 中，每个元素是一个包含 id 和 length 属性的对象。
返回结果： 如果没有重复的 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);