HTMLda data atributlaridan foydalanishni tavsiya qilish uchun nima uchun?

data-* atributlari HTML elementiga bog'langan tasodifiy ma'lumotlarni saqlash uchun ishlatiladi, standart bo'lmagan atributlar yoki DOM xususiyatlaridan foydalanishga hojat qolmaydi.

Asosiy afzalliklar:

• Semantik jihatdan to'g'ri: Ular HTML5 standarta kiradi va hujjatning haqiqiyligini buzmaydi.
• Oson kirish: Ma'lumotlarga kirish JavaScriptda dataset xususiyati orqali amalga oshiriladi, bu data- dan keyingi qismga mos keladigan kalitlar bilan obyektni qaytaradi.
• JavaScript/CSS uchun qulay: Ma'lum ma'lumotlarni elementlarga bog'lash imkonini beradi, ular keyinchalik JavaScript mantiqida yoki CSS bilan uslublashda foydalanilishi mumkin (atribut selektorlar yordamida).
• Ma'lumotlar va taqdimotlarni ajratish: HTML tuzilmasini ma'lumotlardan ajratishga yordam beradi, ular xulq-atvor yoki taqdimot uchun ishlatilishi mumkin.

Foydalanish misollari:

• Ma'lumotlar bazasidagi yozuv ID'sini saqlash.
• Ochiladigan oynalar yoki modal dialoglar uchun parametrlarni saqlash.
• Elementning holatini aniqlash (masalan, data-state="active").
• Backenddan frontendga kichik hajmdagi ma'lumotlarni uzatish va JavaScriptda foydalanish.

JavaScriptda kirish misoli:

// HTML: <div id="myElement" data-id="123" data-category="electronics"></div>
const element = document.getElementById('myElement');
const id = element.dataset.id; // "123" qiymatiga kirish
const category = element.dataset.category; // "electronics" qiymatiga kirish