Kāpēc ieteicams izmantot data atribūtus HTML?

data-* atribūti tiek izmantoti, lai glabātu jebkādus datus, kas saistīti ar konkrētu HTML elementu, bez nepieciešamības izmantot nestandarta atribūtus vai DOM īpašības.

Galvenās priekšrocības:

• Semantiski pareizi: Tie ir HTML5 standarta daļa un neapdraud dokumenta derīgumu.
• Viegla piekļuve: Pieeja datiem tiek veikta caur īpašību dataset JavaScript, kas atgriež objektu ar atslēgām, kas atbilst atribūta daļām pēc data-.
• Ērti JavaScript/CSS: Tie ļauj sasaistīt noteiktus datus ar elementiem, kurus pēc tam var izmantot JavaScript loģikā vai CSS stilā (ar atribūtu selektoriem).
• Datu un prezentācijas atdalīšana: Tie palīdz atdalīt HTML struktūru no datiem, kurus var izmantot uzvedībai vai attēlojumam.

Piemēri:

• Ieraksta ID glabāšana datu bāzē.
• Parametru glabāšana uznirstošajam logam vai modālam dialogam.
• Elementa stāvokļa noteikšana (piemēram, data-state="active").
• Mazāku datu apjomu pārraidīšana no backend uz frontend JavaScript izmantošanai.

Piekļuves piemērs JavaScript:

// HTML: <div id="myElement" data-id="123" data-category="electronics"></div>
const element = document.getElementById('myElement');
const id = element.dataset.id; // Pieeja vērtībai "123"
const category = element.dataset.category; // Pieeja vērtībai "electronics"