Различия между атрибутами и свойствами

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

Атрибуты HTML

Атрибуты — это значения, указанные в исходном HTML-коде элемента. Они существуют как часть разметки и отражают первоначальное состояние элемента. Например:

<input type="text" value="Hello">

Здесь type и value — атрибуты. Их основные особенности:

  • Статичность при загрузке страницы. Атрибут сохраняет то, что было написано в HTML.
  • Доступ через методы getAttribute и setAttribute. Пример в Bliss.js:
var input = bliss.$('input');
var val = input.getAttribute('value'); // "Hello"
input.setAttribute('value', 'World');
  • Не изменяются динамическим взаимодействием с пользователем, если только их явно не обновить через JavaScript. Например, пользователь вводит текст в <input>, но атрибут value останется прежним, пока не вызвать setAttribute.

Свойства DOM

Свойства DOM — это поля объектов, представляющих элементы. Они динамически отражают текущее состояние элемента и чаще всего синхронизированы с атрибутами только при создании элемента. Примеры:

var input = bliss.$('input');
input.value; // "Hello" изначально
input.value = "New Value"; // динамическое изменение свойства

Ключевые характеристики:

  • Динамическое обновление. Значение свойства изменяется при действиях пользователя (например, при вводе текста в поле <input>).
  • Прямой доступ без парсинга строки. Работа через свойства быстрее и удобнее, чем через getAttribute.
  • Не всегда соответствует атрибуту. После изменения свойства DOM атрибут HTML может оставаться старым:
input.value = "Changed";
console.log(input.getAttribute('value')); // "Hello"

Bliss.js и взаимодействие с атрибутами и свойствами

Bliss.js предоставляет упрощённый синтаксис для работы с обоими типами:

  • Атрибуты:
bliss.$('#link').attr('href');          // получить значение href
bliss.$('#link').attr('href', 'newurl'); // изменить значение href
  • Свойства:
bliss.$('#checkbox').prop('checked');          // получить состояние чекбокса
bliss.$('#checkbox').prop('checked', true);   // изменить состояние

Методы .attr() и .prop() разделяют две концепции. Ошибки часто происходят, когда пытаются через .attr() изменить свойства, зависящие от состояния DOM (например, checked, selected, value). В таких случаях нужно использовать .prop().

Особые случаи

  1. Checkbox и radio: Атрибут checked определяет, был ли элемент отмечен изначально, а свойство checked отражает текущее состояние.
var checkbox = bliss.$('#agree');
checkbox.prop('checked', true);   // реально устанавливает галочку
checkbox.attr('checked');          // может остаться "checked" или null
  1. Select и option: Атрибут selected задаёт выбранную опцию по умолчанию, свойство selected отражает текущее состояние:
var option = bliss.$('option:selected');
option.prop('selected', true);   // реально выбирает элемент
  1. Data-атрибуты: HTML-атрибуты data-* при парсинге превращаются в свойства через dataset, что позволяет обращаться к ним как к объекту:
var el = bliss.$('#item');
el.dataset.id = '123';          // изменяет значение свойства
el.getAttribute('data-id');     // возвращает "123"

Практическое правило

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

Эта чёткая граница помогает избежать несоответствий между видимой частью интерфейса и исходным HTML-кодом.

Резюме различий

Параметр Атрибут (attr) Свойство (prop)
Отражает Исходный HTML Текущее состояние DOM
Изменение пользователем Нет Да
Методы Bliss.js .attr() .prop()
Примеры href, id, data-* checked, selected, value

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

Оглавление