Siaran ini akan menerangkan penggunaan atribut data dalam JavaScript.
Bagaimana untuk Menggunakan Atribut Data dalam JavaScript?
Dalam JavaScript, ' data atribut ” digunakan untuk menyimpan maklumat tambahan yang tidak dipaparkan pada halaman web. Maklumat ini boleh ditulis, diakses, dibaca dan diubah secara dinamik mengikut keperluan pengguna. Bahagian ini melaksanakan tugas yang dibincangkan secara praktikal pada atribut data.
Sintaks
< data unsur -*= 'sesuatu nilai' >
Dalam sintaks di atas:
- “ unsur ” mewakili elemen HTML di mana atribut data digunakan.
- “ data-* ” menandakan atribut data berbilang(*) bermula dengan awalan (data-) iaitu kata kunci data diikuti dengan tanda sempang.
- beberapa nilai: Ia menentukan nilai atribut data.
Sekarang, gunakan sintaks di atas untuk mencipta atribut data.
Cipta Atribut Data
< id div = 'myDiv' data - nama = 'Alvin' data - umur = '40' data - jantina = 'lelaki' > div >Kod HTML satu baris yang dinyatakan mencipta yang berikut ' nama data ',' umur data ', dan juga ' jantina data ” atribut di dalam elemen “div” yang idnya ialah “myDiv”.
Mari baca/akses atribut data yang dibuat.
Contoh 1: Baca/Akses Atribut Data Menggunakan Harta 'set data'.
Contoh ini menggunakan sifat 'set data' untuk membaca/mengakses atribut data tertentu atau semua.
Pertama, lihat ' butang 'elemen yang memanggil ' jsFunc() ” apabila dikaitkan “ onclick ” peristiwa dicetuskan apabila klik butang:
< butang onclick = 'jsFunc()' > Akses Atribut Data butang >Sekarang, teruskan ke definisi 'jsFunc()':
< skrip >fungsi jsFunc ( ) {
const unsur = dokumen. getElementById ( 'myDiv' ) ;
konsol. log ( unsur. set data ) ;
}
skrip >
Dalam baris kod di atas:
- ' jsFunc() pertama mengisytiharkan pembolehubah 'elemen' yang menggunakan ' document.getElementById() ” kaedah untuk mengakses elemen div tambahan melalui idnya “myDiv”.
- Seterusnya, ia menggunakan ' console.log() ' kaedah yang akan menggunakan ' set data ” untuk mengakses atribut data elemen div yang diakses dan memaparkannya dalam konsol web.
Pengeluaran
Tekan F12 untuk membuka konsol web:
Ia boleh dilihat bahawa apabila mengklik pada butang yang diberikan, konsol menunjukkan ' DOMStringMap ” yang mengandungi semua atribut data elemen div.
Akses Nilai Khusus
Jika pengguna ingin mengakses atribut data tertentu kemudian tentukan namanya dengan sifat 'set data' seperti ini:
< skrip >fungsi mendapat ( ) {
const unsur = dokumen. getElementById ( 'myDiv' ) ;
konsol. log ( unsur. set data . nama ) ;
}
skrip >
Pada masa ini, atribut data 'nama' diakses menggunakan ' set data ” harta benda.
Pengeluaran
Ia boleh dilihat bahawa konsol hanya menunjukkan nilai atribut data yang ditentukan apabila butang klik.
Contoh 2: Baca/Akses Atribut Data Menggunakan Kaedah “getAttribute()”.
Contoh ini menggunakan kaedah 'getAttribute()' untuk membaca/mengakses atribut data.
Dalam senario ini, elemen butang bagi contoh pertama turut disertakan:
< butang onclick = 'jsFunc()' > Akses Atribut Data butang >Mari lihat kefungsian kaedah 'getAttribute()':
< skrip >fungsi jsFunc ( ) {
const unsur = dokumen. getElementById ( 'myDiv' ) ;
konsol. log ( unsur. getAttribute ( 'nama data' ) ) ;
konsol. log ( unsur. getAttribute ( 'umur data' ) ) ;
konsol. log ( unsur. getAttribute ( 'jantina data' ) ) ;
}
skrip >
Dalam coretan kod di atas:
- Pembolehubah 'elemen' menggunakan ' document.getElementById() ” kaedah untuk mengakses elemen div tambahan menggunakan idnya “myDiv”.
- Seterusnya, ' console.log() ' kaedah menggunakan ' getAttribute() ' kaedah untuk mendapatkan nilai atribut 'data' yang ditentukan bagi elemen div yang diambil dan kemudian memaparkannya dalam konsol web.
- Tugas yang sama dilakukan untuk mengakses atribut data yang ditentukan yang tinggal.
Catatan: Kaedah 'getAttribute()' menentukan atribut data dengan awalan 'data' diikuti dengan tanda sempang(-) iaitu (data-) yang tidak memerlukan semasa menggunakan sifat 'dataset()'.
Pengeluaran
Output di atas memaparkan semua nilai atribut data yang ditentukan pada klik butang.
Contoh 3: Tulis Atribut Data Menggunakan Harta 'set data'.
Contoh ini menulis atribut data menggunakan sifat 'set data'.
Kandungan elemen butang diubah mengikut senario semasa:
< butang onclick = 'jsFunc()' > Tulis Atribut Data butang >Sekarang, tulis atribut data baharu dalam elemen div tambahan:
< skrip >fungsi jsFunc ( ) {
const unsur = dokumen. getElementById ( 'myDiv' ) ;
unsur. set data . ID = 'orang'
konsol. log ( unsur. set data ) ;
}
skrip >
Dalam blok kod di atas:
- ' set data sifat ” menulis nama atribut data baharu “id” dengan nilai rentetan yang ditentukan.
- Seterusnya, ' conolse.log() ” menggunakan sifat “set data” untuk memaparkan antara muka “DOMStringMap” yang mengandungi atribut data yang baru ditulis dalam konsol web.
Pengeluaran
Di sini, konsol memaparkan 'DOMStringMap' yang mengandungi atribut data baharu 'id' yang ditulis menggunakan sifat 'set data'.
Contoh 4: Kemas kini Nilai Atribut Data
Contoh ini mengemas kini nilai sedia ada bagi atribut data tertentu dengan bantuan sifat 'set data'.
Teks elemen butang diubah mengikut senario yang diberikan:
< butang onclick = 'jsFunc()' > Kemas kini Atribut Data butang >Sekarang, teruskan ke bahagian JavaScript:
< skrip >fungsi jsFunc ( ) {
const unsur = dokumen. getElementById ( 'myDiv' ) ;
unsur. set data . nama = 'John'
konsol. log ( unsur. set data . nama ) ;
}
skrip >
Dalam blok kod di atas, nilai atribut data 'nama' yang ditentukan dikemas kini dengan bantuan ' set data ” harta benda.
Pengeluaran
Konsol menunjukkan nilai kemas kini bagi atribut data yang ditentukan apabila butang diklik.
Contoh 5: Padamkan Atribut Data
Contoh ini memadamkan atribut data tertentu dengan menggunakan kata kunci 'padam'.
Teks elemen butang diubah mengikut keperluan:
< butang onclick = 'jsFunc()' > Padamkan Atribut Data butang >Sekarang, ikuti blok kod JavaScript:
< skrip >fungsi jsFunc ( ) {
const unsur = dokumen. getElementById ( 'myDiv' ) ;
memadam elemen. set data . umur ;
konsol. log ( unsur. set data . umur ) ;
}
skrip >
Coretan kod di atas menentukan ' padam ” kata kunci dengan sifat “set data” untuk memadamkan atribut data yang diakses.
Pengeluaran
Adalah diperhatikan bahawa konsol menunjukkan ' tidak ditentukan ” pada klik butang yang mengesahkan dengan jelas bahawa atribut data yang diakses telah dipadamkan.
Kesimpulan
Dalam JavaScript, atribut data boleh digunakan dalam pelbagai cara seperti membaca, mengakses, menulis, mengemas kini dan memadamkannya mengikut keperluan. Semua tugas ini boleh dilakukan dengan bantuan terbina dalam ' set data ” harta benda. Walau bagaimanapun, pengguna juga boleh mengakses atribut data satu demi satu dengan bantuan ' getAttribute() ” kaedah. Siaran ini telah menerangkan secara praktikal penggunaan atribut data dalam JavaScript.