JavaScript'te dataset ile data-* Erişimi
Özel veri özniteliklerini dataset API'siyle okuyup yazın
JavaScript'te dataset ile data-* Erişimi, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.
dataset API'si Nedir
Her HTML öğesi, data-* özniteliklerini dataset özelliği üzerinden sunar; bu özellik, getAttribute() çağrıları gerektirmeden öznitelik adlarını değerlere eşleyen bir DOM dize eşlemesidir.
Öznitelikten Özelliğe Eşleme
data-user-id, el.dataset.userId olur. Öznitelik adlarındaki kısa çizgiler, dataset özelliğinde camelCase biçimine dönüştürülür. data-item-count özniteliğine erişmek için el.dataset.itemCount kullanılır.
Değerleri Okuma
Bir veri özniteliğini okuyun: const id = el.dataset.userId. Tüm dataset değerleri dizedir — sayısal değerleri gerektiğinde Number() veya parseInt() ile dönüştürün. Tanımsız öznitelikler null yerine undefined döndürür.
const card = document.querySelector(".card");
const userId = card.dataset.userId;
const count = Number(card.dataset.itemCount);Değerleri Yazma
dataset üzerinden bir veri özniteliği ayarlayın: el.dataset.state = "active". Bu işlem data-state HTML özniteliğini oluşturur veya günceller. Öznitelik değişikliği DOM'a hemen yansır ve MutationObserver tarafından gözlemlenebilir.
Değerleri Silme
Bir veri özniteliğini silin: delete el.dataset.userId. Buna karşılık gelen data-user-id özniteliği öğeden kaldırılır. Açıkça kaldırmak için el.removeAttribute("data-user-id") da kullanabilirsiniz.
dataset Üzerinde Yineleme
dataset bir DOM dize eşlemesidir — üzerinde for...in döngüsüyle yineleme yapın veya Object.entries içine açın: Object.entries(el.dataset).forEach(([key, value]) => { ... }). Bu yöntem, bir öğedeki tüm veri özniteliklerini toplu olarak okumak için kullanışlıdır.
Bileşen Durumu İçin dataset Kullanımı
Hafif bileşen durumunu gizli input'lar veya JavaScript değişkenleri yerine veri özniteliklerinde saklayın. Bir sekme bileşeni, etkin sekmenin indeksini kapsayıcıdaki data-active-tab içinde saklayabilir; böylece herhangi bir betik, ortak bir değişkene ihtiyaç duymadan bu değeri okuyabilir.
dataset ile Olay Devri
Bir öğe listesinde kapsayıcıya tek bir tıklama dinleyicisi ekleyin. Tıklama gerçekleştiğinde, tıklanan hedefin dataset özelliğini okuyun: e.target.closest("[data-id]").dataset.id. Tek bir dinleyici, her öğeye ayrı ayrı bağlama yükü olmadan tüm öğeleri yönetir.
dataset ile Özel Özelliklerin Karşılaştırması
HTML'den okunması gereken veriler için dataset kullanın (sunucu tarafından oluşturulan ve CSS seçicilerinin erişebildiği meta veriler). HTML'de görünür olması gerekmeyen geçici çalışma zamanı durumu için JavaScript değişkenlerini kullanın. İkisini birlikte kullanmak gereksiz karmaşıklık oluşturur.
Tür Dönüştürme Uyarısı
dataset her zaman dizeler döndürür. el.dataset.active === true her zaman false değerini verir — el.dataset.active === "true" ile karşılaştırın veya dönüştürün: el.dataset.active === "true". dataset'te saklanan Boolean durumu dize karşılaştırması gerektirir.
dataset ile getAttribute Karşılaştırması
Her ikisi de veri özniteliklerini okur. dataset, camelCase erişimi için daha kullanışlıdır; getAttribute ise "data-" ön ekini içeren tam öznitelik adını gerektirir. Modern kodda dataset'i tercih edin; veri özniteliklerinin yanında veri olmayan öznitelikler üzerinde de yineleme yaparken getAttribute kullanın.
Bilgi Kontrolü
data-user-id HTML özniteliği JavaScript dataset nesnesinde nasıl görünür?
Özet
dataset API'si, kolayca okuma/yazma/silme erişimi sağlamak için data-* özniteliklerini camelCase JavaScript özelliklerine eşler. Gizli input'lara veya genel değişkenlere ihtiyaç duymadan bileşen durumu saklamayı, olay devri kalıplarını ve sunucudan istemciye veri aktarımını mümkün kılar.
Sıkça Sorulan Sorular
“JavaScript'te dataset ile data-* Erişimi” dersi ücretsiz mi?
Evet — “JavaScript'te dataset ile data-* Erişimi” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.
“JavaScript'te dataset ile data-* Erişimi” dersinde ne öğreneceğim?
Özel veri özniteliklerini dataset API'siyle okuyup yazın HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
HTML Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“JavaScript'te dataset ile data-* Erişimi” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- data-* Sözdizimi ve Adlandırma Kuralları
- JavaScript'te dataset ile data-* Erişimi
- CSS Öznitelik Seçicileriyle data-* Kullanımı
- Gerçek Dünya Kalıpları: Araç İpuçları ve Durum İzleme