Пост🎯 HTML attributes vs DOM properties

🎯 HTML attributes vs DOM properties Разница между атрибутами и свойствами в 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/