Каква е разликата между атрибутите и свойствата в HTML таговете?

Атрибутите са двойки име-стойност, написани директно в отварящия HTML таг. Те определят началните или текущи характеристики на елемента, но не винаги директно отразяват неговото текущо състояние в DOM.

Свойствата са стойности, свързани с обекти JavaScript, които представляват елементите DOM. Те са динамични и отразяват текущото състояние на елемента.

Ето ключовите разлики:

• Местоположение: Атрибутите се намират в HTML, свойствата — в обектите DOM.
• Типове данни: Атрибутите винаги са низове. Свойствата могат да имат различни типове данни (низове, числа, булеви, обекти).
• Динамичност: Атрибутите са статични след зареждане на страницата (макар че могат да се променят чрез JavaScript). Свойствата могат да се променят динамично в отговор на взаимодействие с потребителя или логика на скриптове.
• Връзка: Много атрибути имат директни съответствия със свойства (например, атрибутът id и свойството id). Но има атрибути без директни свойства (data-*) и свойства без директни атрибути (textContent, className).

Пример:

<input type="text" value="Начална стойност" readonly>

Тук:

• type="text", value="Начална стойност" и readonly са атрибути.

След зареждане на страницата, съответните свойства в JavaScript ще бъдат:

// Вземаме елемента input
const inputElement = document.querySelector('input');

// Свойствата на елемента
console.log(inputElement.type);     // Ще покаже: "text" (свойството съответства на атрибута)
console.log(inputElement.value);    // Ще покаже: "Начална стойност" (първоначално съответства на атрибута)
console.log(inputElement.readOnly); // Ще покаже: true (свойството съответства на атрибута, но в camelCase)

Ако потребителят промени текста в полето за въвеждане, свойството value ще се актуализира, но атрибутът value в HTML ще остане същият, отразявайки само началната стойност.

// Потребителят е въвел "Нова стойност"
// inputElement.value сега ще бъде "Нова стойност",
// но inputElement.getAttribute('value') все още ще върне "Начална стойност".