Milleks on soovitatav kasutada data atribuute HTML-s?

data-* atribuudid kasutatakse juhuslike andmete salvestamiseks, mis on seotud konkreetse HTML elemendiga, ilma vajaduseta kasutada mitte-standardseid atribuute või DOM-omadusi.

Peamised eelised:

• Semantiliselt õiged: Need on HTML5 standardi osa ja ei riku dokumendi kehtivust.
• Lihtne juurdepääs: Andmetele pääseb JavaScriptis ligi dataset omaduse kaudu, mis tagastab objekti, mille võtmed vastavad data- järel olevatele osadele.
• Mugav JavaScripti/CSS-i jaoks: Annab võimaluse siduda teatud andmeid elementidega, mida saab kasutada JavaScripti loogikas või CSS-i stiilides (atribuutide valijate abil).
• Andmete ja esituse eraldamine: Aitab eraldada HTML-struktuuri andmetest, mida saab kasutada käitumise või kuvamise jaoks.

Näited kasutusest:

• Kirje ID salvestamine andmebaasis.
• Parameetrite salvestamine hüpikaknale või modaalaknale.
• Elemendi oleku määratlemine (näiteks, data-state="active").
• Väikeste andmemahtude edastamine backendist frontendile JavaScripti kasutamiseks.

JavaScripti näide juurdepääsust:

// HTML: <div id="myElement" data-id="123" data-category="electronics"></div>
const element = document.getElementById('myElement');
const id = element.dataset.id; // Ligipääs väärtusele "123"
const category = element.dataset.category; // Ligipääs väärtusele "electronics"