HTML'de data özniteliklerinin kullanılması ne amaçla önerilir?

data-* öznitelikleri, belirli bir HTML öğesiyle ilişkili rastgele verileri depolamak için kullanılır, standart olmayan özniteliklerin veya DOM özelliklerinin kullanılmasına gerek kalmadan.

Ana avantajlar:

• Anlamsal olarak doğru: HTML5 standardının bir parçasıdırlar ve belgenin geçerliliğini bozmazlar.
• Kolay erişim: JavaScript'te dataset özelliği aracılığıyla erişilir, bu da data- sonrasındaki bölümlere karşılık gelen anahtarlarla bir nesne döndürür.
• JavaScript/CSS için uygun: Belirli verileri öğelere bağlamaya izin verir, bu veriler daha sonra JavaScript mantığında veya CSS ile stil vermede kullanılabilir (özellik seçicileri kullanılarak).
• Veri ve sunumu ayırma: HTML yapısını, davranış veya sunum için kullanılabilecek verilerden ayırmaya yardımcı olur.

Kullanım örnekleri:

• Veritabanındaki kayıt ID'sinin saklanması.
• Bir açılır pencere veya modal diyalog için parametrelerin saklanması.
• Bir öğenin durumunun belirlenmesi (örneğin, data-state="active").
• Backend'den frontend'e küçük veri hacimlerinin iletimi ve JavaScript'te kullanımı.

JavaScript'te erişim örneği:

// HTML: <div id="myElement" data-id="123" data-category="electronics"></div>
const element = document.getElementById('myElement');
const id = element.dataset.id; // "123" değerine erişim
const category = element.dataset.category; // "electronics" değerine erişim