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

Библиотека Cash предоставляет компактный и удобный API для работы с DOM, обеспечивая лёгкую альтернативу jQuery. Одним из ключевых аспектов взаимодействия с элементами является работа с атрибутами. Cash позволяет как считывать, так и изменять атрибуты элементов, используя лаконичные методы.

Метод .attr()

Метод .attr() является универсальным инструментом для работы с атрибутами. Он поддерживает несколько режимов использования, что делает его гибким и удобным.

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

const element = cash('img#logo');
const src = element.attr('src');
console.log(src);

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

Установка атрибута

cash('a.download').attr('href', 'file.pdf');

В данном случае устанавливается атрибут href для всех элементов, соответствующих селектору. Второй аргумент метода может быть строкой, числом или функцией, возвращающей значение атрибута.

Использование функции для динамической установки

cash('img.thumbnail').attr('alt', function(index, currentValue) {
    return `Изображение №${index + 1}`;
});

Функция принимает два параметра: index — порядковый номер элемента в выборке, currentValue — текущее значение атрибута. Возвращаемое значение присваивается атрибуту.

Установка нескольких атрибутов одновременно

cash('input[name="user"]').attr({
    placeholder: 'Введите имя',
    required: true,
    maxlength: 50
});

При передаче объекта ключами становятся названия атрибутов, а значениями — соответствующие значения, которые будут установлены для всех элементов выборки.

Метод .removeAttr()

Удаление атрибута из элемента осуществляется с помощью метода .removeAttr().

cash('input').removeAttr('disabled');

Метод принимает одну строку с именем атрибута или несколько имён через пробел:

cash('button').removeAttr('disabled aria-label');

После вызова метода указанные атрибуты удаляются у всех выбранных элементов.

Метод .prop() и отличия от .attr()

В Cash также существует метод .prop() для работы с свойствами DOM-элементов, что иногда вызывает путаницу с атрибутами. Основное отличие:

  • attr работает с HTML-атрибутами, отражающими исходное состояние элемента в DOM.
  • prop работает с текущими свойствами элементов, которые могут динамически изменяться скриптами.

Примеры:

// Проверка состояния checkbox
const checked = cash('#agree').prop('checked');

// Установка свойства
cash('#agree').prop('checked', true);

Использование prop особенно важно для булевых свойств (checked, disabled, selected), где изменение атрибута не всегда отражает текущее состояние элемента.

Чтение и установка data-* атрибутов

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

// Чтение
const userId = cash('div.profile').data('user-id');

// Установка
cash('div.profile').data('role', 'admin');

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

Советы по использованию

  • Для массового обновления атрибутов удобнее использовать объект вместо многократных вызовов .attr().
  • Для динамических изменений состояния элементов предпочтительно использовать .prop() вместо .attr().
  • Метод .removeAttr() не влияет на свойства, поэтому для снятия состояния checked или disabled лучше использовать .prop().

Работа с атрибутами через Cash позволяет писать компактный, читаемый код, сохраняя высокую производительность при манипуляциях с DOM. Гибкость методов .attr(), .prop() и .data() обеспечивает удобный доступ как к статическим, так и к динамическим свойствам элементов.

Оглавление