HTML5 Data Attributes: Cara Menggunakan data-* untuk Menyimpan Data di Elemen HTML

Membuat Dokumen HTML dan Data Dasar

Buat direktori kerja bebas, kemudian buat file index.html. Tidak ada package yang perlu diinstal. Contoh pertama sengaja berupa dokumen lengkap supaya dapat dibuka langsung menggunakan browser. Kita menempatkan tiga data attribute pada elemen article: ID produk, kategori, dan stok. Teks nama produk tetap diletakkan dalam elemen yang terlihat, bukan hanya dalam atribut data, karena nama itu memang informasi yang perlu dibaca pengguna. Tombol belum melakukan aksi pada tahap ini; keberadaannya mempersiapkan interaksi pada langkah berikutnya.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Latihan HTML Data Attributes</title>
</head>
<body>
  <h1>Daftar Produk</h1>

  <article
    id="product-card"
    data-product-id="BK-101"
    data-category="buku"
    data-stock="8">
    <h2>Panduan HTML Praktis</h2>
    <p>Stok tersedia: <span id="stock-text">8</span></p>
    <button id="detail-button" type="button">Lihat data produk</button>
  </article>

  <p id="output">Data produk akan tampil di sini.</p>
</body>
</html>

Simpan file lalu buka index.html di browser. Hasil yang diharapkan adalah judul halaman, kartu sederhana berisi nama produk dan stok 8, tombol, serta teks output awal. Untuk memverifikasi atribut, buka DevTools dan gunakan panel Elements/Inspector untuk memilih elemen article. Anda seharusnya melihat data-product-id, data-category, dan data-stock tepat pada elemen itu. Tahap ini membuktikan bahwa browser menerima atribut sebagai bagian markup; atribut tersebut sendiri tidak otomatis mencetak nilainya sebagai konten visual. Selanjutnya kita akan membaca data tersebut dengan JavaScript.

Membaca Nilai Melalui dataset

Sekarang tambahkan JavaScript tanpa membuat file terpisah. Karena struktur artikel utama tidak boleh memakai elemen script aktif, blok berikut menampilkan source yang harus Anda tambahkan ke file praktik. Letakkan elemen script berikut tepat sebelum penutup </body> pada index.html. Posisi ini memastikan elemen kartu, tombol, dan output telah diparse sebelum kode mencarinya. Event listener membaca tiga key dari card.dataset. Perhatikan bahwa data-product-id menjadi productId, sedangkan nama satu kata seperti data-stock tetap menjadi stock.

<script>
  const card = document.getElementById("product-card");
  const button = document.getElementById("detail-button");
  const output = document.getElementById("output");

  button.addEventListener("click", () => {
    const productId = card.dataset.productId;
    const category = card.dataset.category;
    const stock = card.dataset.stock;

    output.textContent =
      `ID: ${productId}, kategori: ${category}, stok: ${stock}`;
  });
</script>

Simpan lalu refresh halaman dan klik tombol Lihat data produk. Hasil yang diharapkan pada paragraf output adalah ID: BK-101, kategori: buku, stok: 8. Anda dapat memverifikasi mapping tersebut lebih jauh melalui Console DevTools dengan memilih elemen menggunakan API DOM, tetapi tampilan output sudah merupakan verifikasi langsung dari kode. Penggunaan textContent juga disengaja: kita hanya ingin menampilkan data sebagai teks, bukan menafsirkannya sebagai markup HTML. Untuk data yang dapat berasal dari pengguna atau sumber luar, kebiasaan memilih API teks ketika markup tidak diperlukan menghindari interpretasi HTML yang tidak diinginkan.

Mengonversi String Menjadi Tipe yang Dibutuhkan

Walaupun data-stock="8" terlihat seperti angka, akses melalui dataset.stock menghasilkan string. Hal ini penting ketika Anda akan melakukan operasi matematika. Penjumlahan menggunakan string dapat menghasilkan konkatenasi yang tidak diinginkan, sedangkan konversi eksplisit membuat maksud program jelas. Ubah isi event listener pada langkah sebelumnya menjadi versi berikut. Kita menggunakan Number() lalu Number.isFinite() agar contoh tidak memperlakukan data yang gagal dikonversi sebagai stok valid. Kode lain pada file tetap sama.

button.addEventListener("click", () => {
  const productId = card.dataset.productId;
  const category = card.dataset.category;
  const stock = Number(card.dataset.stock);

  if (!Number.isFinite(stock)) {
    output.textContent = "Nilai stok tidak valid.";
    return;
  }

  output.textContent =
    `ID: ${productId}, kategori: ${category}, stok berikutnya: ${stock + 1}`;
});

Simpan, refresh, lalu klik tombol. Dengan nilai awal data-stock="8", target output sekarang memuat stok berikutnya: 9, bukan 81. Untuk memverifikasi validasi, Anda dapat sementara mengubah nilai atribut di source menjadi teks yang bukan representasi angka, misalnya data-stock="tersedia", menyimpan dan refresh; output sesudah tombol diklik akan menyatakan nilai stok tidak valid. Setelah pengujian, kembalikan nilainya menjadi 8 agar langkah selanjutnya konsisten. Pola yang sama berlaku untuk tipe lain: tentukan format yang Anda simpan dan lakukan parsing secara eksplisit. Hindari menganggap Boolean(card.dataset.active) akan memahami string "false", sebab string non-kosong tersebut menghasilkan true.

Mengubah Data Attribute dari JavaScript

dataset tidak hanya digunakan untuk membaca. Menetapkan nilai pada propertinya memperbarui custom data attribute terkait pada elemen. Agar perubahan mudah dilihat, tambahkan tombol kedua tepat sesudah tombol detail di dalam article, lalu ganti JavaScript lama dengan blok script lengkap berikut. Saat tombol dipilih, program mengurangi stok, menulis hasil kembali melalui card.dataset.stock, dan memperbarui teks yang terlihat. Penugasan angka ke dataset.stock pada akhirnya direpresentasikan sebagai string pada atribut DOM. Kita tetap memvalidasi nilai sebelum melakukan perhitungan.

<button id="reduce-button" type="button">Kurangi stok</button>

<script>
  const card = document.getElementById("product-card");
  const detailButton = document.getElementById("detail-button");
  const reduceButton = document.getElementById("reduce-button");
  const stockText = document.getElementById("stock-text");
  const output = document.getElementById("output");

  detailButton.addEventListener("click", () => {
    output.textContent =
      `ID: ${card.dataset.productId}, kategori: ${card.dataset.category}, stok: ${card.dataset.stock}`;
  });

  reduceButton.addEventListener("click", () => {
    const stock = Number(card.dataset.stock);

    if (!Number.isFinite(stock) || stock <= 0) {
      output.textContent = "Stok tidak dapat dikurangi.";
      return;
    }

    const newStock = stock - 1;
    card.dataset.stock = newStock;
    stockText.textContent = newStock;
    output.textContent = `Stok DOM diperbarui menjadi ${newStock}.`;
  });
</script>

Setelah refresh, klik Kurangi stok satu kali. Tampilan stok seharusnya menjadi 7. Periksa elemen article melalui DevTools: atributnya sekarang seharusnya memperlihatkan data-stock="7". Ini memverifikasi sinkronisasi antara API dataset dan atribut DOM. Perubahan tersebut hanya terjadi pada dokumen yang sedang dimuat; mengubah DOM tidak menulis ulang file index.html di disk atau database server. Refresh akan mengembalikan nilai 8 karena browser membaca source awal lagi.

Memilih Elemen Berdasarkan Data Attribute

Salah satu keuntungan praktis data attributes adalah kemampuannya bekerja dengan selector atribut. Untuk melihat kasus yang lebih realistis, tambahkan kartu kedua setelah article pertama, tetapi sebelum paragraf output. Kartu kedua memiliki kategori berbeda. Kemudian tambahkan tombol filter di bawah kedua kartu. Pada script dari langkah 4, deklarasikan tombol filter dan tambahkan listener berikut. querySelectorAll('[data-category="buku"]') menghasilkan kumpulan elemen yang cocok; kita kemudian mengubah properti hidden pada kartu produk berdasarkan kategori. Dalam proyek besar, class juga bisa menjadi mekanisme tampilan yang baik, tetapi contoh ini sengaja menunjukkan bagaimana atribut data dapat menjadi sumber nilai untuk seleksi.

<article
  data-product-id="AT-202"
  data-category="alat-tulis"
  data-stock="12">
  <h2>Pensil Mekanik</h2>
  <p>Stok tersedia: 12</p>
</article>

<button id="filter-button" type="button">Tampilkan hanya buku</button>

const filterButton = document.getElementById("filter-button");

filterButton.addEventListener("click", () => {
  const products = document.querySelectorAll("[data-product-id]");

  products.forEach((product) => {
    product.hidden = product.dataset.category !== "buku";
  });

  output.textContent = "Filter kategori buku diterapkan.";
});

Letakkan deklarasi dan listener itu di dalam script yang sama, setelah variabel sebelumnya tersedia. Simpan dan refresh. Sebelum filter, dua produk terlihat; setelah tombol filter diklik, kartu Pensil Mekanik tersembunyi sedangkan produk buku tetap terlihat. Verifikasi tambahan dapat dilakukan di Elements: kartu alat tulis akan memiliki keadaan hidden pada DOM setelah aksi. Selector [data-product-id] berarti “semua elemen yang memiliki atribut ini”, sedangkan pembandingan kategori dilakukan melalui dataset.category. Dengan begitu Anda telah menggunakan data attribute sebagai data terstruktur sederhana sekaligus penanda seleksi.

Membandingkan dataset dengan getAttribute dan Memverifikasi DOM

Langkah terakhir membandingkan dua antarmuka resmi yang dapat membaca nilai sama. Anda tidak perlu mengubah struktur halaman. Tambahkan kode berikut di bagian akhir script yang sudah ada. Kode mengambil ID menggunakan dataset.productId dan getAttribute("data-product-id"), lalu menampilkan hasil perbandingan melalui console. Kita juga menggunakan hasAttribute() untuk memeriksa keberadaan atribut. Ini berguna ketika perbedaan antara “atribut ada” dan “nilai kebetulan kosong” relevan bagi logika aplikasi.

const idFromDataset = card.dataset.productId;
const idFromAttribute = card.getAttribute("data-product-id");

console.log("Nilai sama:", idFromDataset === idFromAttribute);
console.log("Memiliki data-stock:", card.hasAttribute("data-stock"));

Buka DevTools, pilih tab Console, lalu refresh halaman. Untuk source yang masih memakai atribut awal, hasil logika kedua pemeriksaan adalah true. Pesan pertama menunjukkan dataset dan getAttribute() membaca representasi ID yang sama pada kasus ini; pesan kedua memastikan atribut data-stock memang ada. dataset nyaman ketika kode memang mengelola custom data attributes, sedangkan getAttribute(), setAttribute(), hasAttribute(), dan removeAttribute() merupakan API atribut DOM yang lebih umum. Anda tidak perlu memilih satu API untuk seluruh proyek: gunakan bentuk yang membuat maksud operasi paling jelas. Sebagai pemeriksaan akhir, klik tombol detail, kurangi stok, lalu jalankan filter. Detail harus membaca data kartu, stok harus berubah pada DOM dan tampilan, dan hanya kategori buku yang tersisa setelah filter. Jika semua perilaku itu sesuai, contoh telah menguji pembacaan, konversi, penulisan, dan seleksi data attributes.