Kāda ir atšķirība starp atribūtiem un īpašībām HTML tagos?

Atribūti — tas ir ir nosaukuma-vertības pāris, kas rakstīts tieši HTML atvēršanas tagā. Tie nosaka sākotnējās vai pašreizējās elementa īpašības, bet ne vienmēr tieši atspoguļo tā pašreizējo stāvokli DOM.

Īpašības — tas ir vērtības, kas saistītas ar JavaScript objektiem, kas pārstāv DOM elementus. Tās ir dinamiski un atspoguļo pašreizējo stāvokli.

Šeit ir galvenās atšķirības:

• Vieta: Atribūti atrodas HTML, īpašības — DOM objektos.
• Datu tipi: Atribūti vienmēr ir virknes. Īpašības var būt dažādi datu tipi (virknes, skaitļi, loģiskas, objekti).
• Dinamisks: Atribūti ir statiski pēc lapas ielādes (lai gan tos var mainīt ar JavaScript). Īpašības var dinamiski mainīties atkarībā no lietotāja mijiedarbības vai skriptu loģikas.
• Saites: Daudzas īpašības ir tiešas atbilstības īpašībām (piemēram, id atribūts un id īpašība). Bet ir atribūti bez tiešām īpašībām (data-*) un īpašības bez tiešām atribūtiem (textContent, className).

Piemērs:

<input type="text" value="Sākotnējā vērtība" readonly>

Šeit:

• type="text", value="Sākotnējā vērtība" un readonly — tas ir atribūti.

Pēc lapas ielādes, atbilstošās īpašības JavaScript:

// Saņem elementu
const inputElement = document.querySelector('input');

// Elementa īpašības
console.log(inputElement.type);     // Parādīs: "text" (īpašība atbilst atribūtam)
console.log(inputElement.value);    // Parādīs: "Sākotnējā vērtība" (sākotnējā īpašība)
console.log(inputElement.readOnly); // Parādīs: true (īpašība atbilst atribūtam, bet camelCase)

Ja lietotājs mainīs teksta lauka tekstu, īpašība value tiks atjaunināta, bet HTML value atribūts paliks tas pats, tikai atspoguļojot sākotnējo vērtību:

// Lietotājs ievadīja "Jauna vērtība"
// inputElement.value tagad būs "Jauna vērtība",
// bet inputElement.getAttribute('value') joprojām atgriezīs "Sākotnējā vērtība".