DOM上のIDの重複を検出する #JavaScript

HTML5においても、要素のIDの重複は許容されません。

大規模なHTMLファイルや動的なDOMを扱う際、IDが重複しているかどうかを調べるのはValidatorではちょっとやりづらいです。

そこで、ID重複を検出する簡易なチェッカーを作ってみました。

本チェッカーはdocument.getElementByIdなどでは取得できないID重複したDOM要素を、document.querySelectorAll('[id]')のように属性セレクタを用いて複数取得できるという発見を利用しました。
（ただし、IDに対する属性セレクタの仕様を確認していないため、本手法が有効でないブラウザーがあるかもしれません。）

以下がチェッカーです。

pickup-duplicate.js

const idArr = []
const duplicateIdArr = []

document.querySelectorAll("[id]").forEach(elm => {
    const id = elm.getAttribute("id")
    if (idArr.includes(id)) {
      duplicateIdArr.push(id)
    } else {
      idArr.push(id)
    }
})

if (duplicateIdArr.length > 0) {
  console.log("IDの重複があります:", duplicateIdArr)
} else {
  console.log("IDの重複はありません。")
}

これを以下のHTMLファイルを開いた上で開発者ツールのコンソールで実行すれば

no-duplicate.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>has only unique ids</title>
</head>
<body>
  <div id="aaa"></div>
  <div id="bbb"></div>
  <div id="ccc"></div>
  <p id="ddd"></p>
  <div id="eee"></div>
</body>
</html>

IDの重複はありません。

このように重複がないことが確認できます。

一方、以下のようなID重複のあるHTMLで実行すると

duplicate.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>has duplicate ids</title>
</head>
<body>
  <div id="aaa"></div>
  <div id="bbb"></div>
  <div id="ccc"></div>
  <p id="aaa"></p>
  <div id="bbb"></div>
</body>
</html>

IDの重複があります: ["aaa", "bbb"]

と、重複したID名の一覧が表示されます。