Работа с HTML-атрибутами

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

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

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

Синтаксис:

element.attr(attributeName) // возвращает значение атрибута
element.attr(attributeName, value) // устанавливает значение атрибута

Пример чтения атрибута:

var link = Bliss.$('a');
var href = link.attr('href');
console.log(href); // выводит значение href

Пример установки атрибута:

var image = Bliss.$('img');
image.attr('src', 'new-image.png');
image.attr('alt', 'Описание изображения');

Метод attr поддерживает работу с любыми стандартными и пользовательскими атрибутами, включая data-*.

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

Bliss.js позволяет передавать объект для установки нескольких атрибутов одновременно:

var button = Bliss.$('button');
button.attr({
    type: 'button',
    disabled: false,
    'data-action': 'submit'
});

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

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

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

var input = Bliss.$('input');
input.removeAttr('disabled'); // удаляет один атрибут
input.removeAttr(['required', 'placeholder']); // удаляет несколько атрибутов

Метод безопасен: если атрибут отсутствует, ошибок не возникает.

Специальные атрибуты и свойства

Bliss.js различает атрибуты и свойства DOM. Для большинства стандартных HTML-атрибутов используется attr, однако некоторые свойства элементов удобнее изменять напрямую через объект prop.

Пример:

var checkbox = Bliss.$('input[type=checkbox]');
checkbox.prop('checked', true); // устанавливает свойство checked
console.log(checkbox.prop('checked')); // true

Свойства prop и атрибуты attr иногда дают разные результаты, особенно для checked, selected, value и disabled. attr изменяет HTML, prop — текущее состояние элемента.

Работа с пользовательскими атрибутами data-*

Bliss.js поддерживает удобный доступ к data-* через методы data и attr.

var div = Bliss.$('div');
div.attr('data-id', 123);
console.log(div.attr('data-id')); // 123
div.data('id', 456);
console.log(div.data('id')); // 456

Метод data автоматически преобразует значения в удобные типы: числа, объекты JSON, булевы значения. Это упрощает работу с хранением данных на элементах без обращения к HTML напрямую.

Атрибуты в коллекциях элементов

Bliss.js позволяет работать с коллекциями элементов через методы each, attr и removeAttr.

var links = Bliss.$$('a');
links.each(function(link) {
    link.attr('target', '_blank');
});

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

Атрибуты и условные изменения

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

var img = Bliss.$('img');
if (!img.attr('alt')) {
    img.attr('alt', 'Default description');
}

Это помогает поддерживать корректную семантику HTML без дублирования информации.

Примеры реальных сценариев

  1. Динамическая смена ссылок:
Bliss.$$('nav a').each(function(link, index) {
    link.attr('href', `/page/${index + 1}`);
});
  1. Управление состоянием кнопок формы:
var submit = Bliss.$('#submit-btn');
submit.attr('disabled', true);
form.addEventListener('input', function() {
    submit.removeAttr('disabled');
});
  1. Изменение изображений в галерее:
Bliss.$$('img.thumbnail').each(function(img) {
    img.attr('src', img.attr('data-src'));
});

Итоговые рекомендации

  • Для чтения и изменения стандартных атрибутов использовать attr.
  • Для работы с текущими состояниями элементов (checkbox, selected, value) предпочтительнее prop.
  • Для пользовательских данных использовать data.
  • Для массовых изменений — коллекции с each и передача объектов в attr.
  • Всегда проверять наличие атрибута перед установкой, если важно сохранить существующие значения.

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

Оглавление