JavaScript | Как отобрать HTML-элементы по атрибуту?

JavaScript | Как отобрать HTML-элементы по атрибуту?

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

Получили все HTML-элементы документа - JavaScript DOM
Получили все HTML-элементы документа — JavaScript DOM

 

Шаг № 2 — Конвертация HTMLAllCollection в Array

Мы не сможем нормально работать с массиво-подобным объектом HTMLAllCollection, поэтому нам нужно преобразовать его в классический массив Array JavaScript. Это можно сделать коротко и красиво:

[...document.all]
Конвертация HTMLAllCollection в Array - JavaScript
Конвертация HTMLAllCollection в Array — JavaScript

 

Шаг № 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"))
Отобрали HTML-элементы по имени атрибута - JavaScript
Отобрали HTML-элементы по имени атрибута — JavaScript

Шаг № 4 — Готово

После фильтрации мы получим массив с элементами у которых будут нужные нам атрибуты. Задача выполнена.

 

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

DOM

Стандарт DOM — Раздел «The hasAttribute(qualifiedName) method» — https://dom.spec.whatwg.org/#dom-element-hasattribute