queryselector и getelements не помогают? Не знаешь как отобрать HTML-элементы с одинаковым атрибутом? Давай разбираться вместе.
Пример
Есть разметка:
<p data-ee="ee">1</p> <p data-aa="aa">2</p> <p data-bb="bb">3</p> <p data-ee="ee">4</p> <p data-aa="aa">5</p> <p data-ee="ee">6</p>
Нам нужно получить все элементы с атрибутом «data-aa»
Шаг № 1 — Получение всех элементов документа
Чтобы получить все элементы из текущего документа нужно обратиться к самому документу и его свойству all
document.all
Нам вернётся объект-прототип класса HTMLAllCollection
Шаг № 2 — Конвертация HTMLAllCollection в Array
Мы не сможем нормально работать с массиво-подобным объектом HTMLAllCollection, поэтому нам нужно преобразовать его в классический массив Array JavaScript. Это можно сделать коротко и красиво:
[...document.all]
Шаг № 3 — фильтрация массива по имени HTML-атрибута
Стандарт объектной модели документа DOM даёт нам инструмент, который заглядывает в элемент и проверяет наличие в нём нужного нам HTML-атрибута. Метод называется hasAttribute(). Внимание!!! на конце нет буквы s. Мы проверяем только атрибуты самого элемента, а не его потомков. Не путайте!
element . hasAttribute(qualifiedName)
Возвращает истину (true), если элемент element имеет атрибут, чьё полное имя является qualifiedName, и ложь (false) в противном случае.
Внутрь hasAttribute() мы поместим строку с искомым именем атрибута «data-aa«.
Бегать по элементам массива мы будем при помощи метода filter().
[...document.all].filter(i=>i.hasAttribute("data-aa"))
Шаг № 4 — Готово
После фильтрации мы получим массив с элементами у которых будут нужные нам атрибуты. Задача выполнена.
Информационные ссылки
Стандарт DOM — Раздел «The hasAttribute(qualifiedName) method» — https://dom.spec.whatwg.org/#dom-element-hasattribute
