V čom spočíva rozdiel medzi atribútmi a vlastnosťami v HTML značkách?

Atribúty sú dvojice meno-hodnota, ktoré sú priamo napísané v otváracom HTML tagu. Určujú počiatočné alebo aktuálne vlastnosti prvku, ale nemusia vždy priamo odrážať jeho aktuálny stav v DOM.

Vlastnosti sú hodnoty spojené s objektmi JavaScript, ktoré predstavujú prvky DOM. Sú dynamické a odrážajú aktuálny stav prvku.

Tu sú kľúčové rozdiely:

• Umiestnenie: Atribúty sa nachádzajú v HTML, vlastnosti v objektoch DOM.
• Typy dát: Atribúty sú vždy reťazce. Vlastnosti môžu mať rôzne typy dát (reťazce, čísla, boolean, objekty).
• Dynamickosť: Atribúty sú statické po načítaní stránky (hoci ich možno meniť cez JavaScript). Vlastnosti sa môžu dynamicky meniť ako reakcia na interakciu používateľa alebo logiku skriptov.
• Väzba: Mnohé atribúty majú priame zodpovedajúce vlastnosti (napríklad atribút id a vlastnosť id). No existujú atribúty bez priamej vlastnosti (data-*) a vlastnosti bez priameho atribútu (textContent, className).

Príklad:

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

Tu:

• type="text", value="Počiatočná hodnota" a readonly sú atribúty.

Po načítaní stránky budú zodpovedajúce vlastnosti v JavaScripte:

// Získame prvok input
const inputElement = document.querySelector('input');

// Vlastnosti prvku
console.log(inputElement.type);     // Vypíše: "text" (vlastnosť zodpovedá atribútu)
console.log(inputElement.value);    // Vypíše: "Počiatočná hodnota" (zpočiatku zodpovedá atribútu)
console.log(inputElement.readOnly); // Vypíše: true (vlastnosť zodpovedá atribútu, ale v camelCase)

Ak používateľ zmení text v poli, vlastnosť value sa aktualizuje, ale atribút value v HTML zostane rovnaký, odrážajúc iba počiatočnú hodnotu.

// Používateľ zadal "Nová hodnota"
// inputElement.value bude teraz "Nová hodnota",
// ale inputElement.getAttribute('value') stále vráti "Počiatočná hodnota".