Пример 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» или «»data-ee» или какого-нибудь ещё.
Отбор методом querySelectorAll()
document.querySelectorAll('[data-aa]'); // NodeList(2) [p, p] document.querySelectorAll('[data-bb]'); // NodeList [p] document.querySelectorAll('[data-ee]'); // NodeList(3) [p, p, p] document.querySelectorAll('[data-ww]'); // NodeList []
Мы используем метод «querySelectorAll()» на всём документе, чтобы получить все возможные элементы на странице.
Признаком отбора является CSS-селектор по атрибуту, который оформляется квадратными скобками. Метод принимает строку в качестве первого и единственного параметра.
Если мы передадим CSS-селектор не существующего атрибута в документе, то в ответ получим пустой объект класса NodeList. При приведении его к массиву также получим пустой массив.
Если queryselector и getelements не помогают
Не знаешь как отобрать HTML-элементы с одинаковым атрибутом? Давай разбираться вместе.
Шаг № 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