Postingan ini akan menjelaskan penggunaan atribut data dalam JavaScript.
Bagaimana Cara Menggunakan Atribut Data di JavaScript?
Dalam JavaScript, “ data Atribut ” digunakan untuk menyimpan informasi tambahan yang tidak ditampilkan di halaman web. Informasi ini dapat ditulis, diakses, dibaca, dan diubah secara dinamis sesuai dengan kebutuhan pengguna. Bagian ini melakukan tugas yang dibahas secara praktis pada atribut data.
Sintaksis
< data elemen -*= 'suatu nilai' >
Dalam sintaks di atas:
- “ elemen ” mewakili elemen HTML yang menggunakan atribut data.
- “ data-* ” menunjukkan atribut data ganda(*) yang dimulai dengan awalan (data-) yaitu kata kunci data diikuti dengan tanda hubung.
- suatu nilai: Ini menentukan nilai atribut data.
Sekarang, gunakan sintaks di atas untuk membuat atribut data.
Buat Atribut Data
< id div = 'Div saya' data - nama = 'Alvin' data - usia = '40' data - jenis kelamin = 'pria' > div >Kode HTML satu baris yang dinyatakan menciptakan yang berikut “ nama data ', ' usia data ”, dan “ data-gender ” Atribut di dalam elemen “div” yang idnya adalah “myDiv”.
Mari membaca/mengakses atribut data yang dibuat.
Contoh 1: Baca/Akses Atribut Data Menggunakan Properti “dataset”.
Contoh ini menerapkan properti “dataset” untuk membaca/mengakses atribut data tertentu atau semua.
Pertama, lihat “ tombol ” elemen yang memanggil “ jsFunc() ” bila dikaitkan “ klik ” acara dipicu saat tombol diklik:
< tombol klik = 'jsFunc()' > Akses Atribut Data tombol >Sekarang, lanjutkan ke definisi “jsFunc()”:
< naskah >fungsi jsFunc ( ) {
konstanta elemen = dokumen. dapatkanElementById ( 'Div saya' ) ;
menghibur. catatan ( elemen. Himpunan data ) ;
}
naskah >
Pada baris kode di atas:
- “ jsFunc() ” pertama-tama mendeklarasikan variabel “elem” yang menerapkan “ dokumen.getElementById() ” metode untuk mengakses elemen div yang ditambahkan melalui idnya “myDiv”.
- Selanjutnya, ia menggunakan “ konsol.log() ” metode yang akan menggunakan “ Himpunan data ” properti untuk mengakses atribut data dari elemen div yang diakses dan menampilkannya di konsol web.
Keluaran
Tekan F12 untuk membuka konsol web:
Dapat dilihat bahwa setelah mengklik tombol yang diberikan, konsol menampilkan pesan “ DOMStringMap ” berisi semua atribut data elemen div.
Akses Nilai Tertentu
Jika pengguna ingin mengakses atribut data tertentu maka tentukan namanya dengan properti “dataset” seperti ini:
< naskah >dapatkan fungsi ( ) {
konstanta elemen = dokumen. dapatkanElementById ( 'Div saya' ) ;
menghibur. catatan ( elemen. Himpunan data . nama ) ;
}
naskah >
Saat ini, atribut data “nama” diakses menggunakan “ Himpunan data ' Properti.
Keluaran
Dapat dilihat bahwa konsol hanya menampilkan nilai atribut data tertentu setelah tombol diklik.
Contoh 2: Membaca/Mengakses Atribut Data Menggunakan Metode “getAttribute()”.
Contoh ini menggunakan metode “getAttribute()” untuk membaca/mengakses atribut data.
Dalam skenario ini, elemen tombol dari contoh pertama juga disertakan:
< tombol klik = 'jsFunc()' > Akses Atribut Data tombol >Mari kita lihat fungsi metode “getAttribute()”:
< naskah >fungsi jsFunc ( ) {
konstanta elemen = dokumen. dapatkanElementById ( 'Div saya' ) ;
menghibur. catatan ( elemen. dapatkan Atribut ( 'nama-data' ) ) ;
menghibur. catatan ( elemen. dapatkan Atribut ( 'usia data' ) ) ;
menghibur. catatan ( elemen. dapatkan Atribut ( 'data-gender' ) ) ;
}
naskah >
Dalam cuplikan kode di atas:
- Variabel “elem” menerapkan “ dokumen.getElementById() ” metode untuk mengakses elemen div yang ditambahkan menggunakan idnya “myDiv”.
- Selanjutnya, “ konsol.log() ” Metode menggunakan “ dapatkan Atribut() ” metode untuk mendapatkan nilai atribut “data” yang ditentukan dari elemen div yang diambil dan kemudian menampilkannya di konsol web.
- Tugas yang sama dilakukan untuk mengakses atribut data yang ditentukan lainnya.
Catatan: Metode “getAttribute()” menentukan atribut data dengan awalan “data” diikuti dengan tanda hubung(-) yaitu (data-) yang tidak diperlukan saat menggunakan properti “dataset()”.
Keluaran
Output di atas menampilkan semua nilai atribut data yang ditentukan pada klik tombol.
Contoh 3: Menulis Atribut Data Menggunakan Properti “dataset”.
Contoh ini menulis atribut data menggunakan properti “dataset”.
Konten elemen tombol diubah sesuai dengan skenario saat ini:
< tombol klik = 'jsFunc()' > Tulis Atribut Data tombol >Sekarang, tulis atribut data baru di elemen div yang ditambahkan:
< naskah >fungsi jsFunc ( ) {
konstanta elemen = dokumen. dapatkanElementById ( 'Div saya' ) ;
elemen. Himpunan data . pengenal = 'orang'
menghibur. catatan ( elemen. Himpunan data ) ;
}
naskah >
Di blok kode di atas:
- “ Himpunan data Properti ” menulis nama atribut data baru “id” dengan nilai string yang ditentukan.
- Selanjutnya, “ konsol.log() ” menggunakan properti “dataset” untuk menampilkan antarmuka “DOMStringMap” yang berisi atribut data yang baru ditulis di konsol web.
Keluaran
Di sini, konsol menampilkan “DOMStringMap” yang berisi atribut data baru “id” yang ditulis menggunakan properti “dataset”.
Contoh 4: Perbarui Nilai Atribut Data
Contoh ini memperbarui nilai yang ada dari atribut data tertentu dengan bantuan properti “dataset”.
Teks elemen tombol diubah sesuai skenario yang diberikan:
< tombol klik = 'jsFunc()' > Perbarui Atribut Data tombol >Sekarang, beralih ke bagian JavaScript:
< naskah >fungsi jsFunc ( ) {
konstanta elemen = dokumen. dapatkanElementById ( 'Div saya' ) ;
elemen. Himpunan data . nama = 'Yohanes'
menghibur. catatan ( elemen. Himpunan data . nama ) ;
}
naskah >
Pada blok kode di atas, nilai atribut data “nama” yang ditentukan diperbarui dengan bantuan “ Himpunan data ' Properti.
Keluaran
Konsol menampilkan nilai terbaru dari atribut data tertentu setelah tombol diklik.
Contoh 5: Hapus Atribut Data
Contoh ini menghapus atribut data tertentu dengan menggunakan kata kunci “hapus”.
Teks elemen tombol diubah sesuai kebutuhan:
< tombol klik = 'jsFunc()' > Hapus Atribut Data tombol >Sekarang, ikuti blok kode JavaScript:
< naskah >fungsi jsFunc ( ) {
konstanta elemen = dokumen. dapatkanElementById ( 'Div saya' ) ;
hapus elemen. Himpunan data . usia ;
menghibur. catatan ( elemen. Himpunan data . usia ) ;
}
naskah >
Cuplikan kode di atas menentukan “ menghapus ” kata kunci dengan properti “dataset” untuk menghapus atribut data yang diakses.
Keluaran
Diamati bahwa konsol menunjukkan “ belum diartikan ” pada klik tombol yang dengan jelas memverifikasi bahwa atribut data yang diakses telah dihapus.
Kesimpulan
Dalam JavaScript, atribut data dapat digunakan dengan berbagai cara seperti membaca, mengakses, menulis, memperbarui, dan menghapusnya sesuai dengan kebutuhan. Semua tugas ini dapat dilakukan dengan bantuan “ Himpunan data ' Properti. Namun, pengguna juga dapat mengakses atribut data satu per satu dengan bantuan tombol “ dapatkan Atribut() ' metode. Postingan ini secara praktis telah menjelaskan penggunaan atribut data dalam JavaScript.