使用 JavaScript 检测页面中重复的元素 ID-html教程-PHP中文网

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

聖光之護

发布： 2025-10-21 11:18:48

原创

993人浏览过

使用 javascript 检测页面中重复的元素 id

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

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

实现方法

该方法的核心思路是：

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

}

登录后复制

代码解释：

立即学习“Java免费学习笔记（深入）”；

降重鸟

要想效果好，就用降重鸟。AI改写智能降低AIGC率和重复率。

113

查看详情

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 数组中，最终返回。

使用方法

将上述 JavaScript 代码复制到你的 HTML 页面中的 <script> 标签中，或者保存为一个单独的 .js 文件，并在 HTML 页面中引入。
在需要检测重复 ID 的地方调用 checkSameElementID() 函数。
该函数会返回一个数组，其中包含重复的 ID 及其出现次数。你可以将该数组打印到控制台，或者在页面上显示出来。

示例：

<!DOCTYPE html>
<html>
<head>
<title>Check Duplicate IDs</title>
</head>
<body>

<div id="myDiv">This is my first div.</div>
<div id="myDiv">This is my second div.</div>
<div id="anotherDiv">This is another div.</div>

<script>
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 duplicateIDs = checkSameElementID();
  console.log(duplicateIDs);
</script>

</body>
</html>

登录后复制

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