Различия между attr и prop

В библиотеке Dom7, которая используется как облегчённая версия jQuery в среде JavaScript, методы attr и prop предназначены для работы с атрибутами и свойствами элементов DOM. Несмотря на внешнее сходство и частое пересечение в задачах, между ними существуют принципиальные различия.

Атрибуты элементов (attr)

Атрибуты — это значения, заданные в HTML-разметке. Метод attr позволяет читать или изменять именно эти исходные атрибуты.

Синтаксис чтения атрибута:

var value = $('.element').attr('data-id');
  • Возвращает строку с текущим значением атрибута.
  • Если атрибут отсутствует, возвращает undefined.

Синтаксис изменения атрибута:

$('.element').attr('href', 'https://example.com');
  • Позволяет добавлять новые атрибуты или изменять существующие.
  • При изменении атрибута через attr изменяется значение в HTML, но не обязательно внутреннее состояние элемента в браузере.

Особенности работы с атрибутами:

  • Значение атрибута всегда строка, даже если оно числовое или логическое.
  • Используется для управления элементами с точки зрения разметки (например, href, src, data-*).
  • Не изменяет поведение встроенных свойств, если браузер автоматически их синхронизирует.

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

Свойства — это внутренние характеристики объектов DOM, доступные через JavaScript. Метод prop работает напрямую с объектом элемента, а не с его HTML-разметкой.

Синтаксис чтения свойства:

var checked = $('.checkbox').prop('checked');
  • Возвращает текущее состояние свойства, например true или false для чекбоксов.
  • Свойства отражают фактическое состояние элемента в браузере, а не его атрибут в HTML.

Синтаксис изменения свойства:

$('.checkbox').prop('checked', true);
  • Изменяет поведение и состояние элемента напрямую.
  • Используется для управления динамическими свойствами: включение/выключение чекбоксов, фокусировка на элементах, управление видимостью через hidden, активация кнопок через disabled.

Особенности работы с свойствами:

  • Значения могут быть логическими, числовыми или объектными.
  • Изменение свойства влияет на реальное состояние элемента и его поведение.
  • Свойства могут не совпадать с атрибутами, если HTML был изменён динамически.

Ключевые различия

Характеристика attr prop
Источник данных HTML-разметка Объект DOM
Тип возвращаемого значения Всегда строка Логический, числовой, строка и т.д.
Влияние на состояние Только атрибут в HTML Реальное состояние элемента
Применение Работа с data-*, href, src Управление динамическим поведением: checked, disabled, value

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

Изменение атрибута href:

$('.link').attr('href', 'https://newsite.com');

HTML будет содержать новый адрес, но если элемент <a> был уже активирован через JavaScript, реальное состояние перехода изменится только при следующем событии.

Работа с чекбоксом:

// Проверка состояния
if ($('.checkbox').prop('checked')) {
    console.log('Чекбокс активен');
}

// Установка состояния
$('.checkbox').prop('checked', false);

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

Взаимосвязь attr и prop

Некоторые атрибуты и свойства могут синхронизироваться автоматически браузером. Например:

  • checked у чекбоксов
  • selected у <option>
  • value у <input>

При динамическом изменении через attr значение свойства может не обновиться, а при изменении через prop атрибут HTML остается прежним.

Пример:

// HTML: <input type="checkbox" checked>
$('.checkbox').attr('checked', false); // Атрибут изменился, но галочка может остаться
$('.checkbox').prop('checked', false); // Галочка исчезнет, свойство реально изменено

Рекомендации по использованию

  • Использовать attr, когда требуется манипулировать HTML-разметкой и хранить данные в атрибутах.
  • Использовать prop, когда необходимо управлять состоянием элементов в интерфейсе.
  • Для динамически изменяемых свойств, таких как checked, selected, disabled, отдавать предпочтение prop.

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

Оглавление