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

HTML-də data-* atributları, vizual təqdimatı olmayan xüsusi məlumatların DOM elementləri daxilində saxlanması üçün tövsiyə olunur. Bu, aşağıdakı imkanları verir:

• Elementlə əlaqəli kiçik məlumat hissələrini saxlamaq: Məsələn, məhsul identifikatoru, elementin vəziyyəti, vidjetin parametrləri.
• JavaScript vasitəsilə məlumatlara asan giriş və manipulyasiya etmək: Məlumatlar asanlıqla element.dataset vasitəsilə əldə edilə və dəyişdirilə bilər.

// Məlumatları əldə etmək
const myElement = document.getElementById('my-element');
const elementId = myElement.dataset.elementId; // data-element-id atributunun dəyərini əldə et

// Məlumatları təyin etmək
myElement.dataset.status = 'active'; // data-status atributunun dəyərini təyin et

• Semantik olmayan siniflərdən qaçın: Məlumatların saxlanması üçün siniflərin istifadəsi (məsələn, .status-active) markup-u daha az oxunaqlı və dəstəklənməsi daha çətin edə bilər.
• Bəzi ssenarilərdə performansı artır: dataset vasitəsilə məlumatlara giriş, string atributlarının parsinqindən və ya gizli elementlərlə işləməkdən daha sürətli ola bilər.
• Bu məlumatları CSS seçicilərində istifadə etmək:

/* Müəyyən bir statusa malik elementləri seçmək */
[data-status="active"] {
  border: 1px solid green;
}

data-* atributlarını, başqa uyğun semantik HTML atributu olmayan məlumatlar üçün istifadə etmək vacibdir. Axtarış motorları və digər parserlər üçün əlçatan olması üçün, müvafiq semantik elementlər və atributlar istifadə olunmalıdır.