JavaScript | Как получить все ID на HTML-странице?

JavaScript | Как получить все ID на HTML-странице?

Одной командой

Array.from(new Set(Array.from(document.all).map(i => i.id).filter(i => i != ""))).sort()

 

Пример для тренировки

Специально сделаю элементы с одинаковыми идентификаторами:

<p id="a">Как</p>
<p id="b">получить</p>
<p id="e">все</p>
<p id="c">значения</p>
<p id="g">идентификаторов</p>
<p id="h">всех</p>
<p id="d">HTML</p>
<p id="a">элементов</p>
<p id="f">на</p>
<p id="a">странице</p>
<p id="h g">при</p>
<p id="h">помощи</p>
<p id="e">JavaScript</p>
<p id="b">?</p>

 

Тестовый пример для получения всех id - JavaScript
Тестовый пример для получения всех id — JavaScript

 

Пошаговая инструкция — Логика работы

Для начала нужно получить все элементы документа.

document.all
document.all - JavaScript
document.all — JavaScript

Потом нужно преобразовать HTML-коллекцию элементов в массив. Используем метод from() конструктора Array.

Array.from(document.all)
Array.from(document.all) - JavaScript
Array.from(document.all) — JavaScript

 

Теперь проходим по массиву методом map() и возвращаем новый массив с извлечёнными идентификаторами ID.

Array.from(document.all).map(i => i.id)
Array.from() для получения массива - JavaScript
Array.from() для получения массива — JavaScript
Первый элемент с id - JavaScript
Первый элемент с id — JavaScript

Идентификаторы не классы, поэтому значения будут иметь одно слово. Это удобно — можно сразу разложить на элементы массива.

Теперь нам нужно отфильтровать результаты в которых нет идентификаторов. Используем метод filter().

Array.from(document.all).map(i => i.id).filter(i => i != "")
Вернулся массив из 14 id - JavaScript
Вернулся массив из 14 id — JavaScript

Среди идентификаторов могут быть дубли, поэтому нам нужно создать массив с уникальными значениями. Для этого используем конструктор Set.

new Set(Array.from(document.all).map(i => i.id).filter(i => i != ""))
Получение набора Set - JavaScript
Получение набора Set — JavaScript

В этом случае нам вернётся объект, поэтому мы должны передать его в метод from() конструктора Array.

Array.from(new Set(Array.from(document.all).map(i => i.id).filter(i => i != "")))
Массив с уникальными id - JavaScript
Массив с уникальными id — JavaScript

Мы получим массив с уникальными идентификаторами на HTML-странице.

 

Теперь можно отсортировать элементы массива, чтобы удобнее было работать с идентификаторами. Используем метод sort()

Array.from(new Set(Array.from(document.all).map(i => i.id).filter(i => i != ""))).sort()
Элементы массива отсортированы - JavaScript
Элементы массива отсортированы — JavaScript

На выходе мы получаем отсортированный массив по возрастанию элементов в порядке алфавита.

 

Как вывести список этих идентификаторов на страницу?

Склеиваем все элементы массива в одну строку с разделителем <br> при помощи метода join()

Array.from(new Set(Array.from(document.all).map(i => i.id).filter(i => i != ""))).sort().join("<br>")
Элементы массива в одну строку - JavaScript
Элементы массива в одну строку — JavaScript

Выводим строку на текущую страницу. Используем метод write()

document.write(Array.from(new Set(Array.from(document.all).map(i => i.id).filter(i => i != ""))).sort().join("<br>"))
Список выведен на страницу - JavaScript
Список выведен на страницу — JavaScript

 

Информационные ссылки