data-* özellikleri, herhangi bir HTML öğesi üzerinde özel, özel veriler depolamanıza izin verir. Bunlar, DOM'a meta veri eklemek için standart bir yol olup, JavaScript tarafından okunabilir ve standart olmayan öznitelikler veya sınıfları kötüye kullanmadan işlem yapar.
Edit
dataset aracılığıyla okumaconst btn = document.querySelector("button");
btn.dataset.id; // "42"
btn.dataset.userRole; // "admin" ← kebab-case becomes camelCase
btn.dataset.isActive; // "true" ← always a STRING
// writing updates the attribute too
btn.dataset.id = "99"; // sets data-id="99" in the DOM
İki önemli kural: data-user-role dataset.userRole olarak erişilir (tireler camelCase'e dönüşür) ve her değer bir dizedir — gerektiğinde dönüştürün (Number(btn.dataset.id), btn.dataset.isActive === "true").
button[data-is-active="true"] { font-weight: bold; }
button::after { content: attr(data-id); } /* display the value */
list.addEventListener("click", (e) => {
const id = e.target.dataset.id; // know which item was clicked
if (id) deleteItem(id);
});
Her öğe üzerinde id'yi depolamak, ana öğe üzerindeki bir dinleyicinin tüm öğeleri işleyebilmesi anlamına gelir.
data-* sunucu verilerini DOM'a istemci tarafı JS'ye iletmenin temiz, standartlara uygun bir yoludur (ek bir API çağrısı olmadan), olay temsilcisini ayarlamak ve CSS durumunu yönetmek için — HTML'i geçersiz kılan standart olmayan öznitelikler icat etmeden.
Büyük veya hassas veriler burada depolamayın; markup'ta görülebilir.