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

В контексте работы с DOM важнейшей концепцией является различие между атрибутами (attributes) и свойствами (properties) HTML-элементов. Часто эти понятия воспринимаются как идентичные, но на практике между ними существуют ключевые различия, которые оказывают влияние на поведение скриптов и на управление элементами страницы.

Атрибуты HTML

Атрибуты — это часть разметки HTML, которые задаются при создании элемента. Они описывают начальное состояние элемента и хранятся в DOM как HTML-код, доступный через объект Element.

Примеры атрибутов:

<input type="text" value="Привет" id="input1" disabled>

type="text"
value="Привет"
id="input1"
disabled

Эти атрибуты не изменяются автоматически при изменении состояния элемента пользователем. Они определяют начальные параметры элемента.

Для доступа к атрибутам используют методы:

const input = document.getElementById('input1');

// Получение атрибута
console.log(input.getAttribute('value')); // "Привет"

// Изменение атрибута
input.setAttribute('value', 'Новое значение');

// Удаление атрибута
input.removeAttribute('disabled');

Ключевая особенность: атрибуты хранят исходные значения и служат для описания элемента на уровне HTML.

Свойства DOM

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

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

const input = document.getElementById('input1');

// Получение свойства
console.log(input.value); // текущий текст в поле, может отличаться от атрибута

// Изменение свойства
input.value = 'Другое значение';

// Проверка состояния флага disabled
console.log(input.disabled); // true или false

Особенности свойств:

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

Примеры расхождений между атрибутами и свойствами

Текстовое поле <input>

<input id="myInput" value="Начальное">

const input = document.getElementById('myInput');
input.value = "Новое значение";

console.log(input.getAttribute('value')); // "Начальное"
console.log(input.value); // "Новое значение"

Атрибут value хранит исходное значение.
Свойство value отражает текущее значение в поле.

Чекбоксы <input type="checkbox">

<input id="checkbox" type="checkbox" checked>

const checkbox = document.getElementById('checkbox');
checkbox.checked = false;

console.log(checkbox.getAttribute('checked')); // "checked"
console.log(checkbox.checked); // false

Атрибут checked показывает, был ли чекбокс изначально отмечен.
Свойство checked отражает текущее состояние.

Атрибут class и свойство className

<div id="myDiv" class="box"></div>

const div = document.getElementById('myDiv');

div.className = 'container';

console.log(div.getAttribute('class')); // "box"
console.log(div.className); // "container"

Атрибут class сохраняет значение из HTML.
Свойство className изменяется через DOM.

Методы работы с атрибутами

getAttribute(name) — получить значение атрибута.
setAttribute(name, value) — установить или изменить атрибут.
removeAttribute(name) — удалить атрибут.
hasAttribute(name) — проверить наличие атрибута.

Свойства и синхронизация с атрибутами

Некоторые свойства синхронизируются с атрибутами при создании элемента, например id, href, src, value, checked.

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