Batch-операции над атрибутами

Bliss.js предоставляет мощный инструмент для работы с DOM, включая возможность массового изменения атрибутов элементов. Работа с атрибутами через обычный DOM часто требует перебора элементов и написания циклов вручную. Bliss.js упрощает этот процесс, позволяя выполнять batch-операции с минимальным количеством кода.

Выбор элементов и массовое применение атрибутов

Методы $$ и each позволяют выбирать группы элементов и применить к ним операции одновременно:

$$('div.item').each(function(el) {
    el.setAttribute('data-active', 'true');
});

Здесь:

  • $$('div.item') — выборка всех элементов с классом item.
  • each — метод итерации по коллекции.
  • el.setAttribute('data-active', 'true') — установка атрибута каждому элементу.

Преимущество в том, что подобные операции работают с целыми коллекциями без явного использования циклов for или forEach.

Метод attr для работы с несколькими атрибутами

Bliss.js расширяет стандартный DOM и позволяет использовать метод attr для установки, получения и удаления атрибутов.

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

$('button').attr('disabled', true);

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

var isDisabled = $('button').attr('disabled');

Удаление атрибута:

$('button').attr('disabled', null);

Массовая установка атрибутов через объект:

$$('img.thumbnail').attr({
    'src': 'placeholder.jpg',
    'alt': 'Thumbnail',
    'title': 'Изображение превью'
});

В данном примере все выбранные изображения получают одинаковый набор атрибутов. Использование объекта позволяет избежать повторяющихся вызовов setAttribute и делает код более читаемым.

Batch-операции с динамическими значениями

Bliss.js поддерживает функциональные значения атрибутов, что позволяет вычислять значение для каждого элемента отдельно:

$$('li').attr('data-index', function(el, i) {
    return i + 1;
});

Здесь:

  • el — текущий элемент.
  • i — индекс элемента в коллекции.
  • Возвращаемое значение становится значением атрибута data-index.

Такой подход удобен для нумерации, генерации уникальных идентификаторов или динамического формирования ссылок.

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

Метод removeAttr поддерживает массив атрибутов, что позволяет быстро очищать элементы:

$$('input[type="text"]').removeAttr(['readonly', 'disabled']);

Эта операция удаляет сразу два атрибута у всех выбранных полей ввода, упрощая управление состояниями формы.

Условное применение атрибутов

Иногда требуется установить атрибуты только для элементов, удовлетворяющих определённому условию:

$$('div.card').each(function(el) {
    if (!el.hasAttribute('data-processed')) {
        el.attr('data-processed', 'true');
    }
});

Использование hasAttribute в сочетании с attr позволяет избегать повторной обработки элементов и управлять логикой на уровне batch-операций.

Интеграция с CSS и классами

Хотя работа с атрибутами отличается от управления классами, часто атрибуты тесно связаны с визуальными эффектами. Bliss.js позволяет комбинировать методы attr и addClass:

$$('button.toggle').each(function(el) {
    var active = el.attr('data-active') === 'true';
    el.attr('data-active', !active);
    el.toggleClass('active', !active);
});

Здесь изменение атрибута data-active сопровождается синхронизацией класса, что упрощает создание интерактивных элементов интерфейса.

Использование с формами и данными

Batch-операции над атрибутами особенно полезны для форм. Например, массовое управление состояниями полей:

$$('form input, form select').attr('disabled', true);

или динамическое обновление атрибутов name и value перед отправкой формы:

$$('input[data-dynamic]').attr(function(el, i) {
    return {
        name: `field_${i}`,
        value: el.value.trim()
    };
});

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

Советы по оптимизации batch-операций

  • Минимизировать выборки: лучше один раз выбрать элементы и применить к ним attr или removeAttr, чем повторно вызывать $$.
  • Использовать функциональные значения для динамических атрибутов — это быстрее, чем отдельные присвоения внутри each.
  • Комбинировать с each только когда требуется логика с условиями; для простых установок объектов attr эффективнее.
  • Сохранять читаемость кода: использование объектов для множества атрибутов и массивов для удаления делает код компактным и понятным.

Bliss.js превращает работу с DOM-атрибутами из рутинной и многословной задачи в короткие, мощные и легко читаемые конструкции, подходящие как для статических изменений, так и для динамического управления элементами на странице.

Оглавление