J*aScript 教程：检测页面中重复的 Element ID_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

J*aScript 教程：检测页面中重复的 Element ID

2025-10-21

浏览次数：次

返回列表

javascript 教程：检测页面中重复的 element id

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

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

实现原理

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

AI Surge Cloud

低代码数据分析平台，帮助企业快速交付深度数据

87 查看详情 AI Surge Cloud

获取所有带有 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);

使用说明

将上述 J*aScript 代码添加到你的 HTML 文件中，可以放在 <script> 标签内，或者单独保存为一个 .<a style="color:#f60; text-decoration:underline;" title= "js"href="https://www.php.cn/zt/15802.html" target="_blank">js 文件，然后在 HTML 文件中引用。</script>
在需要检测重复 ID 的时候，调用 checkSameElementID() 函数。
函数返回一个数组，其中包含了所有重复的 ID 及其出现次数。如果没有重复的 ID，则返回字符串 "No Element ID duplicates!"。
可以通过 console.log() 等方式将结果输出到控制台，方便查看。