Урок: найти повторяющиеся id в документе

Назначение

Повторяющийся id делает связи label, фрагментов URL и ARIA неоднозначными. В этом уроке вы соберёте простой диагностический список повторов на собственной странице до публикации.

Как это работает

Код читает существующие id и не меняет документ. Для каждой строки сохраняется число в Map. В отчёт попадают только значения, встречающиеся более одного раза; сами элементы можно затем найти в инспекторе.

Пример

const counts = new Map();
for (const element of document.querySelectorAll("[id]")) {
  const id = element.id;
  counts.set(id, (counts.get(id) ?? 0) + 1);
}
const duplicates = [...counts].filter(([, count]) => count > 1);
console.table(duplicates.map(([id, count]) => ({id, count})));

Что должно получиться

На странице без повторов таблица пуста. При двух одинаковых id появляется запись с числом 2. Это проверка текущего DOM, поэтому результат зависит от уже выполненных скриптов.

Граница применения и частая ошибка

Пустой результат не доказывает валидность всего HTML. Скрипт не проверяет отдельные документы iframe и закрытые теневые деревья. После переименования id нужно обновить все ссылки и атрибуты, которые на него ссылаются, а не только сам элемент.

Самостоятельная проверка

Создайте в учебной копии два одинаковых id и связанную подпись label. Найдите повтор, исправьте имя и for, затем проверьте клик по подписи. Повторите аудит после динамического добавления ещё одной карточки.

Связанные материалы

• Локальный просмотр
• Регрессионная проверка
• Панель Network