Mengakses data-* dengan dataset dalam JavaScript
Baca dan tulis atribut data khusus melalui API dataset.
Mengakses data-* dengan dataset dalam JavaScript adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.
Apa itu API dataset
Setiap elemen HTML menyediakan atribut data-* melalui properti dataset — sebuah DOMStringMap yang memetakan nama atribut ke nilainya tanpa memerlukan pemanggilan getAttribute().
Pemetaan Atribut ke Properti
data-user-id menjadi el.dataset.userId. Tanda hubung dalam nama atribut diubah menjadi camelCase pada properti dataset. Untuk mengakses data-item-count, gunakan el.dataset.itemCount.
Membaca Nilai
Baca atribut data: const id = el.dataset.userId. Semua nilai dataset berupa string — ubah nilai numerik dengan Number() atau parseInt() sesuai kebutuhan. Atribut yang tidak terdefinisi mengembalikan undefined, bukan null.
const card = document.querySelector(".card");
const userId = card.dataset.userId;
const count = Number(card.dataset.itemCount);Menulis Nilai
Tetapkan atribut data melalui dataset: el.dataset.state = "active". Ini membuat atau memperbarui atribut HTML data-state. Perubahan atribut langsung tercermin dalam DOM dan dapat diamati oleh MutationObserver.
Menghapus Nilai
Hapus atribut data: delete el.dataset.userId. Atribut data-user-id yang sesuai akan dihapus dari elemen. Anda juga dapat menggunakan el.removeAttribute("data-user-id") untuk penghapusan secara eksplisit.
Mengiterasi dataset
dataset adalah DOMStringMap — iterasikan dengan perulangan for...in atau sebarkan ke Object.entries: Object.entries(el.dataset).forEach(([key, value]) => { ... }). Ini berguna untuk membaca semua atribut data pada sebuah elemen secara massal.
Menggunakan dataset untuk Status Komponen
Simpan status komponen yang ringan dalam atribut data, bukan dalam input tersembunyi atau variabel JavaScript. Komponen tab menyimpan indeks tab active dalam data-active-tab pada wadahnya, sehingga dapat dibaca oleh skrip apa pun tanpa variabel bersama.
Delegasi Peristiwa dengan dataset
Dalam daftar item, pasang satu pendengar klik pada wadahnya. Saat diklik, baca dataset target yang diklik: e.target.closest("[data-id]").dataset.id. Satu pendengar menangani semua item tanpa beban pengikatan per item.
dataset dibandingkan Properti Kustom
Gunakan dataset untuk data yang perlu dapat dibaca dari HTML (metadata yang dirender server dan dapat diakses oleh selektor CSS). Gunakan variabel JavaScript untuk status runtime sementara yang tidak perlu terlihat dalam HTML. Mencampurkan keduanya menambah kerumitan yang tidak perlu.
Perhatian terhadap Pemaksaan Tipe
dataset selalu mengembalikan string. el.dataset.active === true selalu bernilai false — bandingkan dengan el.dataset.active === "true" atau lakukan konversi: el.dataset.active === "true". Status boolean yang disimpan dalam dataset memerlukan perbandingan string.
dataset dibandingkan getAttribute
Keduanya membaca atribut data. dataset lebih praktis untuk akses camelCase; getAttribute memerlukan nama atribut lengkap, termasuk awalan "data-". Utamakan dataset dalam kode modern; gunakan getAttribute saat mengiterasi atribut non-data bersama atribut data.
Pemeriksaan Pengetahuan
Bagaimana atribut HTML data-user-id muncul dalam objek dataset JavaScript?
Ringkasan
API dataset memetakan atribut data-* ke properti JavaScript camelCase agar mudah dibaca, ditulis, dan dihapus. API ini memungkinkan penyimpanan status komponen, pola delegasi peristiwa, serta pengiriman data dari server ke klien tanpa input tersembunyi atau variabel global.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Mengakses data-* dengan dataset dalam JavaScript” gratis?
Ya — teks lengkap “Mengakses data-* dengan dataset dalam JavaScript” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Mengakses data-* dengan dataset dalam JavaScript”?
Baca dan tulis atribut data khusus melalui API dataset. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai HTML Academy?
Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Mengakses data-* dengan dataset dalam JavaScript” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Sintaks data-* dan Konvensi Penamaan
- Mengakses data-* dengan dataset dalam JavaScript
- Menggunakan data-* dengan Pemilih Atribut CSS
- Pola Dunia Nyata Tooltip Pelacakan Status