javascript - 用于审核页面 DOM 中重复 ID 的快速 javascript

Question

我发现我正在处理的项目中有许多重复的 ID。我不想一次性浏览整个产品，也不想使用过重的解决方案，比如完整的 HTML 验证器——我只想要一个可以在任何给定页面上运行的快速脚本，以轻松识别出现的任何重复 ID。我在那里工作。

我在这些方面发现了一个问题，但它已经很老了，需要一个 jQuery 解决方案——我们在这个项目中不使用 jQuery，坦率地说，它已经过时了。

那么：我可以在控制台中运行什么小 ES6 片段来识别 DOM 中的重复 ID？

标签： javascripthtmldomauditing

Answer 1

在没有 jQuery 的现代 JavaScript (ES6+) 中：

[...document.querySelectorAll('[id]')].forEach(el => {
  const dups = document.querySelectorAll(`[id="${el.id}"]`);

  if (dups.length > 1 && dups[0] === el) {
    console.error(`Duplicate IDs #${el.id}`, ...dups);
  }
});

全部归功于@Rafi：https ://stackoverflow.com/a/62145753/1033203