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

Dom7 — это компактная и высокопроизводительная библиотека для работы с DOM, которая часто используется вместе с фреймворком Framework7, но может применяться и отдельно. Одной из ключевых возможностей Dom7 является удобное управление атрибутами элементов.

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

Для чтения атрибута используется метод attr().

const link = Dom7('a.link');
const href = link.attr('href');
console.log(href);
  • Если вызвать attr() с одним аргументом (названием атрибута), метод вернёт значение первого элемента из набора.
  • Если атрибут отсутствует, результатом будет undefined.

Метод поддерживает стандартные HTML-атрибуты (id, class, href, src) и пользовательские (data-*).

const button = Dom7('button');
const customData = button.attr('data-role');

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

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

Dom7('img').attr('src', 'image.jpg');
Dom7('a').attr('target', '_blank');
  • Атрибут будет применён ко всем элементам в выборке.
  • Любое существующее значение атрибута будет перезаписано.

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

Для удобства Dom7 поддерживает передачу объекта с парами ключ: значение.

Dom7('input').attr({
    type: 'text',
    placeholder: 'Введите текст',
    maxlength: 50
});
  • Это особенно полезно при инициализации форм и динамическом создании элементов.

Работа с data-* атрибутами

Dom7 предоставляет отдельный метод data(), который работает поверх HTML data-* атрибутов.

const item = Dom7('.item');
item.data('id'); // Чтение data-id
item.data('role', 'admin'); // Установка data-role
  • Метод автоматически конвертирует названия атрибутов в camelCase (data-user-id → userId).
  • Позволяет хранить данные, не влияя напрямую на видимый DOM.

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

Метод hasAttr() проверяет существование атрибута на элементе.

if (Dom7('img').hasAttr('alt')) {
    console.log('Атрибут alt установлен');
}
  • Возвращает true или false.
  • Полезно при условной логике, когда необходимо определить, изменять атрибут или нет.

Удаление атрибутов

Метод removeAttr() удаляет один или несколько атрибутов.

Dom7('a').removeAttr('target');
Dom7('img').removeAttr('width height');
  • Можно перечислять атрибуты через пробел, чтобы удалить сразу несколько.
  • Работает для стандартных и пользовательских атрибутов.

Особенности работы с множественными элементами

Все методы атрибутов (attr(), data(), removeAttr()) работают на коллекции элементов.

Dom7('li').attr('data-selected', 'true');
  • Каждому элементу в наборе будет назначен одинаковый атрибут.
  • Чтение через attr() всегда возвращает значение первого элемента коллекции.

Взаимодействие с классами и стилями

Хотя Dom7 имеет отдельные методы addClass(), removeClass(), toggleClass() и css(), иногда удобно использовать attr() для работы с class и style:

Dom7('div').attr('class', 'box active');
Dom7('div').attr('style', 'color: red; background: yellow;');
  • Этот способ перезаписывает все существующие классы или стили, поэтому его используют с осторожностью.

Совместимость с нативным DOM

Методы Dom7 фактически работают поверх стандартных свойств getAttribute, setAttribute, removeAttribute и hasAttribute.

const el = Dom7('input')[0]; // Получаем первый элемент из выборки
el.getAttribute('type');     // Эквивалент attr('type')
el.setAttribute('type', 'password'); // Эквивалент attr('type', 'password')
  • Это обеспечивает полную совместимость с нативными API и позволяет комбинировать Dom7 и чистый JavaScript без конфликтов.

Примечания по производительности

  • Dom7 оптимизирован для массовых операций: установка атрибутов на десятки и сотни элементов выполняется быстро.
  • Чтение атрибутов всегда возвращает значение первого элемента, поэтому для получения всех значений коллекции рекомендуется использовать метод each().
Dom7('img').each((index, el) => {
    console.log(Dom7(el).attr('src'));
});
  • Такой подход сохраняет удобный синтаксис Dom7 и позволяет обрабатывать наборы элементов в цикле.

Использование в динамически создаваемых элементах

При создании элементов через Dom7('<div></div>') можно сразу назначать атрибуты:

const newDiv = Dom7('<div></div>').attr({
    id: 'new',
    'data-role': 'container'
});
Dom7('body').append(newDiv);
  • Такой способ позволяет объединить создание, настройку и вставку в DOM в одной цепочке методов.

Эти возможности делают Dom7 мощным инструментом для гибкого управления атрибутами элементов и позволяют писать компактный, чистый и понятный код при работе с динамическим DOM.

Оглавление