Барои чӣ тавсия дода мешавад, ки ба истифодаи хосиятҳои data дар HTML?

Атрибутҳои data-* барои нигоҳ доштани маълумоти тасодуфӣ, ки бо унсури HTML муайян алоқаманданд, истифода мешаванд, бе ниёз ба истифодаи атрибутҳои ғайриоддӣ ё хосиятҳои DOM.

Арзиши асосӣ:

• Маъноӣ дуруст: Онҳо қисми стандарти HTML5 мебошанд ва дар дурустии ҳуҷҷат вайрон намекунанд.
• Дастрасӣ осон: Дастрасӣ ба маълумот тавассути хосият dataset дар JavaScript сурат мегирад, ки объекти бо калидҳо, ки ба қисмҳои атрибут пас аз data- мувофиқат мекунанд, бармегардонад.
• Мусоид барои JavaScript/CSS: Имкон медиҳад, ки маълумоти муайянро ба унсурҳо пайванд кунед, ки баъдан дар мантиқи JavaScript ё барои услуб додан дар CSS (бо истифода аз интихобкунандагони атрибут) истифода мешаванд.
• Ҷудо кардани маълумот аз намоиш: Помог мекунад, ки сохтори HTML аз маълумот ҷудо карда шавад, ки барои рафтор ё намоиш истифода мешаванд.

Маслиҳатҳои истифода:

• Ҳифз кардани ID-и сабт дар базаи додаҳо.
• Ҳифз кардани параметрҳо барои тирезаи поп-ап ё диалоги модалӣ.
• Таҳқиқи ҳолати унсур (масалан, data-state="active").
• Тасҳеҳ кардани ҳаҷми ками маълумот аз бекенд ба фронтенд барои истифода дар JavaScript.

Маслиҳати дастрасӣ дар JavaScript:

// HTML: <div id="myElement" data-id="123" data-category="electronics"></div>
const element = document.getElementById('myElement');
const id = element.dataset.id; // Дастрасӣ ба арзиши "123"
const category = element.dataset.category; // Дастрасӣ ба арзиши "electronics"