Dataset (data-*) nedir? — JavaScript
DOM elemanlarımızdaki data-* ön eki ile başlayan öznitelikler (attributes), özel veri öznitelikleridir. DOM elemanımızın sahip olmadığı yeni bir özel öznitelik eklemek istersek bunu bu ön ek ile yaparız.
Bunun birkaç avantajı vardır. Birincisi DOM elemanının sahip olduğu ya da sonradan sahip olacağı kendine ait bir öznitelik ile çakışmaz.
Diğeri ise JavaScript tarafında bu datalara erişmek ve değiştirmek için güzel bir API sağlanır.
HTML tarafında bir özel öznitelik tanımlamak istediğimizde bu data- ön eki ile başlar ve - , _ , . , : karakterlerini içerebilir. kebab-case şeklinde yazılmalıdır. Ayrıca büyük harf ile yazılan nitelikleri dikkate almaz ve küçük harfe dönüştürür.
JavaScript tarafında bu değerlere erişmek için dataset isimli bir özellikten faydalanırız. HTML de yazdığımızın aksine burada data- ön ekleri bulunmadan ve camelCase yapısında özniteliklerimizi çağırırız.
Ayrıca bu özellik değerleri değiştirmemize de olanak verir.
Yeni bir özel özniteliği JavaScript tarafında eklemek istediğimizde bunu data- ön eki olmadan ve camelCase şeklinde yaparız.
Bu eklemeden sonra HTML tarafında elemanımız şu şekilde görünecektir.
Bu şu anlama gelir. HTML tarafında eklenen özel öznitelikler JavaScript tarafına geçerken data- ön eki kaldırılır ve camelCase e dönüştürülür. JavaScript tarafında eklenen özel öznitelikler ise kebab-case e dönüştürülür ve data- ön eki alır.
Happy Coding!
Kaynakça:
HTMLOrForeignElement.dataset, MDN — https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/dataset
Global Attributes, data-*, MDN — https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*
