HTML-də data atributlarından istifadə etmək üçün nə üçün tövsiyə olunur?

data-* atributları, xüsusi HTML elementinə əlaqəli istənilən məlumatları saxlamaq üçün istifadə olunur, standart olmayan atributlar və ya DOM xüsusiyyətlərindən istifadə etməyə ehtiyac olmadan.

Əsas üstünlüklər:

• Semantik olaraq düzgün: Bunlar HTML5 standartının bir hissəsidir və sənədin düzgünlüyünü pozmur.
• Asan giriş: Məlumatlara giriş JavaScript-də dataset xüsusiyyəti vasitəsilə həyata keçirilir, bu da data- sonrası hissəyə uyğun açarlarla obyekt qaytarır.
• JavaScript/CSS üçün əlverişli: Müəyyən məlumatları elementlərə bağlamağa imkan verir, daha sonra JavaScript məntiqində və ya CSS-də stil vermək üçün istifadə oluna bilər (atribut seçiciləri ilə).
• Məlumat və təqdimatın ayrılması: HTML strukturunu məlumatlardan ayırmağa kömək edir, bunlar davranış və ya təqdimat üçün istifadə oluna bilər.

İstifadə nümunələri:

• Verilənlər bazasında qeyd ID-sinin saxlanması.
• Pop-up və ya modal dialoq üçün parametrlərin saxlanması.
• Elementin vəziyyətinin müəyyənləşdirilməsi (məsələn, data-state="active").
• Backend-dən frontend-ə kiçik məlumat həcmlərinin ötürülməsi və JavaScript-də istifadə.

JavaScript-də giriş nümunəsi:

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