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

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

Пример 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

Получили все 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