Kuo skiriasi atributai nuo savybių HTML žymėse?

Ypatybės – tai poros vardas-reikšmė, kurios rašomos tiesiogiai atviroje HTML žymoje. Jos apibrėžia pradinius arba dabartinius elemento parametrus, tačiau ne visada tiesiogiai atspindi jo dabartinę būseną DOM.

Savybės – tai reikšmės, susijusios su JavaScript objektais, kurie reprezentuoja DOM elementus. Jos yra dinamiškos ir atspindi dabartinę elemento būseną.

Štai pagrindiniai skirtumai:

• Vieta: Ypatybės yra HTML, savybės – DOM objektuose.
• Duomenų tipai: Ypatybės visada yra eilutės. Savybės gali turėti įvairius duomenų tipus (eilutes, skaičius, loginės reikšmės, objektus).
• Dinamiškumas: Ypatybės yra statinės po puslapio įkėlimo (nors jas galima keisti per JavaScript). Savybės gali būti dinamiškai keičiamos vartotojo sąveikos ar skriptų logikos dėka.
• Ryšys: Daugelis ypatybių turi tiesioginius atitikmenis savybėms (pavyzdžiui, id atributas ir id savybė). Tačiau yra atributų be tiesioginių savybių (data-*) ir savybių be tiesioginių atributų (textContent, className).

Pavyzdys:

<input type="text" value="Pradinis reikšmė" readonly>

Čia:

• type="text", value="Pradinis reikšmė" ir readonly – tai atributai.

Po puslapio įkėlimo, atitinkamos savybės JavaScript'e:

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

// Elemento savybės
console.log(inputElement.type);     // Parodys: "text" (savybė atitinka atributą)
console.log(inputElement.value);    // Parodys: "Pradinis reikšmė" (pradinė savybė)
console.log(inputElement.readOnly); // Parodys: true (savybė atitinka atributą, bet camelCase)

Jei vartotojas pakeis teksto įvedimo laukelio tekstą, savybė value bus atnaujinta, tačiau HTML value atributas liks tas pats, atspindėdamas tik pradinę reikšmę:

// Vartotojas įvedė "Nauja reikšmė"
// inputElement.value dabar bus "Nauja reikšmė",
// tačiau inputElement.getAttribute('value') vis dar grąžins "Pradinis reikšmė".