У чему се састоји разлика између атрибута и својстава у HTML теговима?

Atributi su parovi ime-vrednost koji su napisani direktno u otvarajućem HTML tagu. Oni određuju početne ili trenutne karakteristike elementa, ali ne odražavaju uvek direktno njegovo trenutno stanje u DOM-u.

Svojstva su vrednosti povezane sa JavaScript objektima koji predstavljaju DOM elemente. Ona su dinamična i odražavaju trenutno stanje elementa.

Evo ključnih razlika:

• Lokacija: Atributi se nalaze u HTML-u, svojstva u DOM objektima.
• Tipovi podataka: Atributi su uvek nizovi znakova. Svojstva mogu imati različite tipove podataka (nizove, brojeve, boolean, objekte).
• Dinamičnost: Atributi su statični nakon učitavanja stranice (iako ih je moguće menjati putem JavaScript-a). Svojstva se mogu dinamički menjati kao odgovor na interakciju korisnika ili logiku skripti.
• Veza: Mnogi atributi imaju direktne odgovarajuće svojstva (na primer, atribut id i svojstvo id). Međutim, postoje atributi bez direktnih svojstava (data-*) i svojstva bez direktnih atributa (textContent, className).

Primer:

<input type="text" value="Početna vrednost" readonly>

Ovde:

• type="text", value="Početna vrednost" i readonly su atributi.

Nakon učitavanja stranice, odgovarajuće svojstva u JavaScript-u će biti:

// Dobijamo element input
const inputElement = document.querySelector('input');

// Svojstva elementa
console.log(inputElement.type);     // Ispisaće: "text" (svojstvo odgovara atributu)
console.log(inputElement.value);    // Ispisaće: "Početna vrednost" (početno odgovara atributu)
console.log(inputElement.readOnly); // Ispisaće: true (svojstvo odgovara atributu, ali u camelCase)

Ako korisnik promeni tekst u polju za unos, svojstvo value će se ažurirati, ali atribut value u HTML-u će ostati isti, odražavajući samo početnu vrednost.

// Korisnik je uneo "Novu vrednost"
// inputElement.value sada će biti "Novu vrednost",
// ali inputElement.getAttribute('value') i dalje će vratiti "Početna vrednost".