Чтение атрибутов

Библиотека Umbrella JS предоставляет удобный и лаконичный способ работы с DOM, включая чтение и управление атрибутами элементов. В основе лежит метод attr(), который позволяет как получать значения атрибутов, так и задавать их.

Получение значения атрибута

Для получения значения атрибута у одного или нескольких элементов используется вызов:

u('селектор').attr('имяАтрибута');

Если в выборке несколько элементов, метод возвращает значение атрибута первого элемента.

Пример:

const linkHref = u('a.my-link').attr('href');
console.log(linkHref); // "/home"

Здесь attr('href') вернул значение атрибута href первого найденного элемента с классом my-link.

Получение нескольких атрибутов

Umbrella JS поддерживает получение нескольких атрибутов сразу, используя массив имен:

const attributes = u('img').attr(['src', 'alt']);
console.log(attributes); // { src: "image.png", alt: "Описание" }

Возвращается объект, где ключи соответствуют именам атрибутов, а значения — их содержимому. Если атрибут отсутствует, его значение будет undefined.

Работа с dataset

Для работы с атрибутами data-* можно использовать стандартный синтаксис через attr() или через dataset():

const userId = u('div.user').attr('data-id');

или

const userId = u('div.user').dataset('id');

Метод dataset() упрощает работу именно с data-* и возвращает значение напрямую, без необходимости указывать полный атрибут.

Чтение атрибутов для группы элементов

Когда выборка содержит несколько элементов, можно получить массив значений атрибутов с помощью метода map():

const linkHrefs = u('a.nav-link').map(el => el.getAttribute('href'));
console.log(linkHrefs); // ["/home", "/about", "/contact"]

Это позволяет обрабатывать все элементы коллекции и использовать полученные значения для дальнейшей логики.

Особенности и нюансы

  • Отсутствие атрибута: если атрибут отсутствует, attr() вернёт undefined, а dataset() — undefined для конкретного ключа.
  • Чтение boolean-атрибутов: для атрибутов типа checked, disabled, selected метод attr() возвращает строковое значение "true" или "false", если атрибут явно задан, или null/undefined, если отсутствует.
  • Чтение пользовательских атрибутов: любые нестандартные атрибуты можно получить точно так же, как стандартные. Например, u('div').attr('data-role') вернёт значение data-role любого элемента <div>.

Примеры использования в реальных сценариях

Сбор всех ссылок на странице:

const urls = u('a').map(link => link.getAttribute('href'));
console.log(urls);

Получение всех data-атрибутов для элементов списка:

const itemsData = u('li.item').map(item => u(item).dataset());
console.log(itemsData);
// [{id: "1", category: "books"}, {id: "2", category: "electronics"}]

Проверка состояния чекбокса:

const isChecked = u('input[type=checkbox]').attr('checked') === 'checked';
console.log(isChecked);

Сравнение attr() и prop() для чтения

Хотя Umbrella JS в основном использует attr() для работы с атрибутами, иногда удобно отличать атрибуты DOM от свойств элементов. Например, у чекбоксов checked:

const checkedAttr = u('input[type=checkbox]').attr('checked'); // "checked" или undefined
const checkedProp = u('input[type=checkbox]').prop('checked'); // true или false

prop() возвращает фактическое состояние элемента, в то время как attr() — значение атрибута в HTML.

Ключевые моменты

  • attr('имя') возвращает значение атрибута первого элемента в выборке.
  • attr(['имя1', 'имя2']) возвращает объект с соответствующими значениями.
  • dataset('ключ') упрощает работу с data-*.
  • Для нескольких элементов удобнее использовать map() для получения всех значений.
  • Отличие attr() от prop() важно для boolean-атрибутов.

Чтение атрибутов в Umbrella JS позволяет быстро получать необходимые данные с элементов страницы без лишнего кода, сохраняя лаконичность и читабельность.

Оглавление