Kodėl rekomenduojama naudoti data atributus HTML?

data-* atributai naudojami norint saugoti bet kokius duomenis, susijusius su konkrečiu HTML elementu, nereikalaujant naudoti nestandartinius atributus ar DOM savybes.

Pagrindiniai pranašumai:

• Semanetiškai teisingi: Jie yra HTML5 standarto dalis ir nesulaužo dokumento galiojimo.
• Lengvas prieinamumas: Prieiga prie duomenų vyksta per dataset savybę JavaScript, kuri grąžina objektą su raktų, atitinkančių atributų dalis po data-.
• Patogu JavaScript/CSS: Leidžia susieti tam tikrus duomenis su elementais, kurie vėliau gali būti naudojami JavaScript logikoje arba CSS stiliui (naudojant atributų selektorius).
• Duomenų ir prezentacijos atskyrimas: Padeda atskirti HTML struktūrą nuo duomenų, kurie gali būti naudojami elgsenai ar pateikimui.

Naudojimo pavyzdžiai:

• Laikyti įrašo ID duomenų bazėje.
• Saugo parametrus iššokantiems langams ar modaliems dialogams.
• Nustatyti elemento būseną (pvz., data-state="active").
• Perduoti mažus duomenų kiekius iš backend'o į frontend'ą JavaScript naudojimui.

JavaScript prieigos pavyzdys:

// HTML: <div id="myElement" data-id="123" data-category="electronics"></div>
const element = document.getElementById('myElement');
const id = element.dataset.id; // Prieiga prie "123" reikšmės
const category = element.dataset.category; // Prieiga prie "electronics" reikšmės