Разница между атрибутами и свойствами в HTML/DOM может быть запутанной, особенно когда названия совпадают. Кратко:
* Атрибут — часть HTML.
* Свойство — часть DOM-объекта.
Пример:
<input value="Hello">
const input = document.querySelector('input');
console.log(input.getAttribute('value')); // "Hello"
console.log(input.value); // "Hello"
input.value = 'World';
console.log(input.getAttribute('value')); // "Hello"
Значение атрибута остаётся неизменным, даже если свойство обновляется в JS. DOM-свойства могут не синхронизироваться с атрибутами после инициализации.
🔹Свойства могут отличаться от атрибутов
<input disabled>
input.hasAttribute('disabled'); // true
input.disabled; // true
input.removeAttribute('disabled');
input.disabled; // false
Свойство
disabled — булево. Атрибут disabled работает как флаг: его наличие имеет значение, не важно, какое значение вы ему присвоили.
<input disabled="false">
Это всё равно
disabled. Так работает HTML.🔹Когда использовать атрибуты, а когда свойства?
* Используйте атрибуты, когда:
* Вам нужно установить начальное значение в HTML.
* Вы работаете с HTML-строкой.
* Вы хотите сохранить значение при сериализации (например,
outerHTML).* Используйте свойства, когда:
* Вы работаете с DOM в JS.
* Нужно прочитать или изменить текущее состояние элемента.
🔹Иногда стоит быть осторожнее
input.setAttribute('value', 'New');
console.log(input.value); // "New"
Иногда установка атрибута также влияет на свойство, но не всегда — зависит от элемента и конкретного атрибута/свойства.
https://jakearchibald.com/2024/attributes-vs-properties/