V čem spočívá rozdíl mezi atributy a vlastnostmi v HTML značkách?

Atributy jsou dvojice jméno-hodnota, které jsou přímo zapsány v otevíracím HTML tagu. Určují počáteční nebo aktuální vlastnosti prvku, ale nemusí vždy přímo odrážet jeho aktuální stav v DOM.

Vlastnosti jsou hodnoty spojené s objekty JavaScript, které představují prvky DOM. Jsou dynamické a odrážejí aktuální stav prvku.

Zde jsou klíčové rozdíly:

• Umístění: Atributy jsou v HTML, vlastnosti v objektech DOM.
• Datové typy: Atributy jsou vždy řetězce. Vlastnosti mohou mít různé datové typy (řetězce, čísla, boolean, objekty).
• Dynamika: Atributy jsou statické po načtení stránky (ačkoliv je lze změnit přes JavaScript). Vlastnosti se mohou dynamicky měnit v reakci na interakci uživatele nebo logiku skriptů.
• Vztah: Mnoho atributů má přímé odpovídající vlastnosti (například atribut id a vlastnost id). Existují však atributy bez přímých vlastností (data-*) a vlastnosti bez přímých atributů (textContent, className).

Příklad:

<input type="text" value="Počáteční hodnota" readonly>

Zde:

• type="text", value="Počáteční hodnota" a readonly jsou atributy.

Po načtení stránky budou odpovídající vlastnosti v JavaScriptu:

// Získáme prvek input
const inputElement = document.querySelector('input');

// Vlastnosti prvku
console.log(inputElement.type);     // Vypíše: "text" (vlastnost odpovídá atributu)
console.log(inputElement.value);    // Vypíše: "Počáteční hodnota" (zpočátku odpovídá atributu)
console.log(inputElement.readOnly); // Vypíše: true (vlastnost odpovídá atributu, ale v camelCase)

Pokud uživatel změní text v poli, vlastnost value se aktualizuje, ale atribut value v HTML zůstane stejný, odrážející pouze počáteční hodnotu.

// Uživatel zadal "Nová hodnota"
// inputElement.value bude nyní "Nová hodnota",
// ale inputElement.getAttribute('value') stále vrátí "Počáteční hodnota".