Mis vahe on atribuutidel ja omadustel HTML-märkides?

Atribuudid on nimi-väärtuse paarid, mis kirjutatakse otse HTML avatud sildile. Need määravad elemendi algse või praeguse omaduse, kuid ei pruugi alati otseselt kajastada selle praegust seisundit DOM-is.

Omadused on väärtused, mis on seotud JavaScripti objektidega ja esindavad DOM-elemente. Need on dünaamilised ja kajastavad praegust seisundit.

Siin on peamised erinevused:

• Asukoht: Atribuudid asuvad HTML-is, omadused DOM-objektides.
• Andmetüübid: Atribuudid on alati stringid. Omadused võivad omada erinevaid andmetüüpe (stringid, numbrid, loogilised, objektid).
• Dünaamilisus: Atribuudid on staatilised pärast lehe laadimist (kuigi neid saab muuta JavaScripti kaudu). Omadused võivad dünaamiliselt muutuda kasutaja interaktsiooni või skriptide loogika tulemusena.
• Seos: Paljud atribuudid omavad otsest vastavust omadustele (näiteks id atribuut ja id omadus). Kuid on atribuute ilma otsese omaduseta (data-*) ja omadusi ilma otsese atribuudita (textContent, className).

Näide:

<input type="text" value="Algväärtus" readonly>

Siin:

• type="text", value="Algväärtus" ja readonly — need on atribuudid.

Pärast lehe laadimist JavaScriptis on vastavad omadused:

// Saame elemendi
const inputElement = document.querySelector('input');

// Elemendi omadused
console.log(inputElement.type);     // Näitab: "text" (omadus vastab atribuudile)
console.log(inputElement.value);    // Näitab: "Algväärtus" (algväärtus)
console.log(inputElement.readOnly); // Näitab: true (omadus vastab atribuudile, kuid camelCase)

Kui kasutaja muudab teksti sisestusvälja teksti, uuendatakse omadus value, kuid HTML-is value atribuut jääb samaks, kajastades ainult algset väärtust:

// Kasutaja sisestab "Uue väärtuse"
// inputElement.value nüüd on "Uue väärtus",
// kuid inputElement.getAttribute('value') tagastab endiselt "Algväärtus".