Свойства элементов

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

Получение и установка свойств элементов

В Bliss.js свойства элемента можно получать и устанавливать через методы .prop() и .attr(). Важно различать эти методы:

  • .prop() используется для работы с реальными свойствами объекта DOM, такими как checked, selected, disabled.
  • .attr() предназначен для работы с HTML-атрибутами, например, id, data-*, href.

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

var checkbox = Bliss.$('input[type="checkbox"]');

// Получение свойства checked
var isChecked = checkbox.prop('checked');

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

// Работа с атрибутами
var link = Bliss.$('a.example');
var href = link.attr('href'); // получение атрибута
link.attr('href', 'https://example.com'); // установка атрибута

Работа с классами и стилями

Bliss.js упрощает управление классами через метод .addClass(), .removeClass(), .toggleClass() и проверку наличия класса .hasClass():

var box = Bliss.$('.box');

// Добавление класса
box.addClass('highlighted');

// Удаление класса
box.removeClass('highlighted');

// Переключение класса
box.toggleClass('active');

// Проверка наличия класса
var hasActive = box.hasClass('active');

Для управления CSS-свойствами элементов используется метод .css(). Метод позволяет как получать текущее значение свойства, так и задавать одно или несколько свойств одновременно:

var element = Bliss.$('.container');

// Получение значения
var width = element.css('width');

// Установка одного свойства
element.css('height', '200px');

// Установка нескольких свойств
element.css({
    backgroundColor: 'red',
    fontSize: '16px'
});

Работа с текстом и HTML-содержимым

Методы .text() и .html() в Bliss.js позволяют работать с текстовым и HTML-содержимым элементов:

var paragraph = Bliss.$('p.description');

// Получение текста
var content = paragraph.text();

// Установка текста
paragraph.text('Новый текст');

// Получение HTML
var innerHTML = paragraph.html();

// Установка HTML
paragraph.html('<strong>Выделенный текст</strong>');

Эти методы автоматически обрабатывают вложенные элементы и заменяют содержимое элемента без необходимости прямого обращения к innerHTML или innerText.

Атрибуты data-* и пользовательские свойства

Bliss.js предоставляет удобный способ работы с пользовательскими атрибутами через метод .data(). Он автоматически конвертирует имена атрибутов из kebab-case в camelCase и обратно:

var item = Bliss.$('.item');

// Получение data-атрибута
var userId = item.data('userId');

// Установка data-атрибута
item.data('role', 'admin');

Использование .data() гарантирует корректное взаимодействие с DOM и удобную работу с типами данных, так как Bliss.js при необходимости выполняет автоматическое преобразование строк в числа и логические значения.

Свойства форм и элементов ввода

Для элементов форм и ввода данные свойства имеют особое значение. Bliss.js позволяет легко работать с value, checked, selected, disabled:

var input = Bliss.$('#username');
var checkbox = Bliss.$('#subscribe');

// Получение значения поля ввода
var username = input.prop('value');

// Установка значения
input.prop('value', 'newUser');

// Работа с чекбоксом
checkbox.prop('checked', true);
var isSubscribed = checkbox.prop('checked');

Методы .prop() и .val() (псевдоним в Bliss.js) обеспечивают одинаковую функциональность для элементов формы:

input.val('admin');       // установка
var currentValue = input.val();  // получение

Атрибуты ссылок, изображений и мультимедиа

Bliss.js упрощает управление атрибутами элементов img, a, video, audio. Например, изменение источника изображения или ссылки выполняется через .attr():

var image = Bliss.$('img#logo');
image.attr('src', 'logo_new.png');
image.attr('alt', 'Новый логотип');

var link = Bliss.$('a#homepage');
link.attr('href', 'https://newsite.com');
link.attr('target', '_blank');

Для элементов мультимедиа можно получать текущие свойства и управлять состоянием воспроизведения:

var video = Bliss.$('video#intro');

var duration = video.prop('duration');
video.prop('currentTime', 30);
video.prop('paused', false);

Итоговая структура работы со свойствами

Bliss.js объединяет работу с DOM-элементами через единый, лаконичный API:

  • .prop() — свойства DOM (checked, disabled, value, selected, paused и т. д.)
  • .attr() — HTML-атрибуты (id, href, src, data-*, alt)
  • .data() — пользовательские data-атрибуты
  • .css() — стили
  • .text() и .html() — текст и HTML-содержимое
  • .addClass(), .removeClass(), .toggleClass(), .hasClass() — управление классами

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

Оглавление