DOM “ Daftar Token ” berisi banyak properti atau metode yang dapat diakses oleh pengguna akhir sesuai dengan kebutuhannya. Properti dan metode yang disediakan oleh daftar ini melakukan operasi spesifik pada kumpulan data yang disediakan dan mengembalikan hasilnya. Ini lebih mirip array karena memiliki berbagai anggota yang dapat dipilih berdasarkan indeksnya dan seperti array, indeks pertama adalah “ 0 ”. Tapi Anda tidak bisa menggunakan metode seperti “ pop()”, “push()” atau “gabung() ”.
Blog ini akan menjelaskan cara kerja Objek HTML DOMTokenList dengan JavaScript.
Bagaimana Cara Bekerja Dengan Objek JavaScript HTML DOMTokenList?
HTML DOMTokenList tidak ada artinya dengan sendirinya dan nilainya hanya disebabkan oleh properti dan metode yang ada di dalamnya. Mari kunjungi properti dan metode ini secara mendetail serta penerapan yang tepat.
Metode 1: Metode Tambah()
“ Menambahkan ()” melampirkan atau menetapkan kelas, properti, atau token sederhana baru dengan elemen yang dipilih. Sintaksnya dinyatakan di bawah ini:
htmlElemen. menambahkan ( oneOrMoreToken )
Implementasinya dilakukan melalui kode berikut:
< kepala >
< gaya >
.ukuran huruf{
ukuran font: besar;
}
.warna{
warna latar: biru kadet;
warna: asap putih;
}
< / gaya >
< / kepala >
< tubuh >
< h1 gaya = 'warna: kadet biru;' > Linux < / h1 >
< tombol klik = 'tindakan()' > Penambah < / tombol >
< P > Tekan Tombol di atas untuk Menerapkan Styling < / P >
< div pengenal = 'terpilih' >
< P > Saya adalah Teks yang Dipilih. < / P >
< / div >
< naskah >
fungsi tindakan() {
document.getElementById('dipilih').classList.add('Ukuran font', 'warna');
}
< / naskah >
< / tubuh >
Penjelasan kode di atas adalah sebagai berikut:
- Pertama, pilih dua kelas CSS “ ukuran huruf ” dan “warna” dan berikan properti CSS acak seperti “ ukuran font”, “warna latar belakang” dan “warna ”.
- Selanjutnya, buat tombol menggunakan “< tombol >” tag yang memanggil “ tindakan ()” menggunakan fungsi “ klik ” pendengar acara.
- Selain itu, buatlah induk “ div ” elemen dan berikan id “ terpilih ” dan masukkan data tiruan ke dalamnya.
- Setelah itu, tentukan “ tindakan ()” berfungsi dan menyimpan referensi elemen yang dipilih dengan mengakses id uniknya.
- Terakhir, gunakan “ Daftar kelas ” properti untuk menetapkan kelas dan melampirkan “ menambahkan ()' metode. Kemudian, teruskan kelas CSS di dalam tanda kurung metode ini dan kelas ini akan diterapkan ke elemen yang dipilih.
Output setelah kompilasi kode di atas dihasilkan sebagai:
Gif di atas mengonfirmasi bahwa kelas CSS telah ditetapkan ke elemen yang dipilih melalui “ menambahkan ()' metode.
Metode 2: Metode Hapus()
Metode ini menghapus kelas atau id tertentu dari satu atau lebih elemen yang dipilih seperti yang dilakukan pada kode di bawah ini:
< kepala >< gaya >
.ukuran huruf {
huruf- ukuran : besar;
}
. warna {
latar belakang- warna : kadet biru;
warna : asap putih;
}
< / gaya >
< / kepala >
< tubuh >
< h1 gaya = 'warna: kadet biru;' > Petunjuk Linux < / h1 >
< tombol klik = 'tindakan()' >Penambah< / tombol >
< P >Tekan Tombol di atas untuk Menerapkan Styling< / P >
< div pengenal = 'terpilih' kelas = 'warna ukuran font' >
< P >Saya Terpilih Teks .< / P >
< / div >
< naskah >
fungsi tindakan ( ) {
dokumen.getElementById ( 'terpilih' ) .classList.hapus ( 'warna' ) ;
}
< / naskah >
< / tubuh >
Penjelasan kode di atas adalah sebagai berikut:
- Awalnya, kode yang dijelaskan pada kode di atas digunakan di sini sebagai contoh.
- Di sini, keduanya “ warna ' Dan ' ukuran huruf ” kelas ditugaskan langsung ke elemen yang dipilih.
- Setelah itu, di dalam “ tindakan ()” fungsi yang dipanggil oleh “ klik ” pendengar acara “ menghapus ()” metode token digunakan.
- Metode ini mengambil satu atau beberapa kelas yang akan dihapus dari elemen yang dipilih. Dalam kasus kami, “ warna ” kelas akan dihapus dari elemen HTML yang dipilih.
Output untuk kode di atas ditampilkan sebagai:
Output di atas menunjukkan kelas CSS tertentu telah dihapus dari elemen yang dipilih menggunakan metode “remove()”.
Metode 3: Metode Beralih()
“ beralih ()” metode adalah kombinasi keduanya “ menambahkan ()' Dan ' menghapus ()” metode. Ini pertama-tama menetapkan kelas CSS yang disediakan ke elemen HTML yang dipilih dan kemudian menghapusnya sesuai dengan tindakan pengguna.
< html >< kepala >
< gaya >
.ukuran huruf {
huruf- ukuran : xx-besar;
}
. warna {
latar belakang- warna : kadet biru;
warna : asap putih;
}
< / gaya >
< / kepala >
< tubuh >
< h1 gaya = 'warna: kadet biru;' > Petunjuk Linux < / h1 >
< tombol klik = 'tindakan()' >Penambah< / tombol >
< P >Tekan Tombol di atas untuk Menerapkan Styling< / P >
< div pengenal = 'terpilih' >
< P >Saya Terpilih Teks .< / P >
< / div >
< naskah >
fungsi tindakan ( ) {
dokumen.getElementById ( 'terpilih' ) .classList.toggle ( 'ukuran huruf' ) ;
}
< / naskah >
< / tubuh >
< / html >
Deskripsi kode di atas dinyatakan di bawah ini:
- Program yang sama digunakan seperti yang digunakan pada bagian di atas, hanya “ beralih ()” diganti dengan metode “ menghapus ()' metode.
Pada akhir tahap kompilasi, outputnya adalah sebagai berikut:
Outputnya menunjukkan bahwa kelas CSS tertentu ditambahkan dan dihapus sesuai dengan tindakan pengguna.
Metode 4: Berisi() Metode
“ mengandung ()” metode ini digunakan untuk memeriksa ketersediaan kelas CSS tertentu pada elemen HTML dan implementasinya dinyatakan di bawah ini:
< naskah >fungsi tindakan ( ) {
biarkan x = dokumen. dapatkanElementById ( 'terpilih' ) . Daftar kelas . mengandung ( 'ukuran huruf' ) ;
dokumen. dapatkanElementById ( 'tes' ) . innerHTML = X ;
}
naskah >
Bagian HTML dan CSS tetap sama. Hanya di “< naskah >” tag, metode “contains()” diterapkan pada elemen yang dipilih untuk memeriksa apakah “ ukuran huruf ” diterapkan pada elemen itu atau tidak. Kemudian hasilnya ditampilkan di halaman web pada elemen HTML yang memiliki id “ tes ”.
Setelah kode di atas dikompilasi, halaman web akan muncul seperti ini:
Outputnya menunjukkan bahwa nilai “ BENAR ” dikembalikan yang berarti kelas CSS tertentu diterapkan pada elemen HTML yang dipilih.
Metode 5: Metode Item()
“ barang ()” metode memilih token atau kelas CSS sesuai dengan nomor indeksnya, dimulai dari “ 0 ”, seperti yang ditunjukkan di bawah ini:
< tubuh >< gaya h1 = 'warna: kadet biru;' > Linux h1 >
< tombol klik = 'tindakan()' > Pemeriksa tombol >
< P > CSSnya kelas yang ditugaskan pada awalnya , diambil : P >
< h3 identitas = 'kasus penggunaan' kelas = 'Cls pertama, SecondCls, ThirdCls' > h3 >
< naskah >
fungsi tindakan ( ) {
biarkan demoList = dokumen. dapatkanElementById ( 'kasus penggunaan' ) . Daftar kelas . barang ( 0 ) ;
dokumen. dapatkanElementById ( 'kasus penggunaan' ) . innerHTML = Daftar demo ;
}
naskah >
tubuh >
Penjelasan kode di atas:
- Pertama, beberapa kelas CSS ditugaskan ke elemen yang kita pilih dengan id “ kasus penggunaan ” dan metode “action()” yang dipanggil melalui “ klik ' peristiwa.
- Dalam fungsi ini, “ barang ()” metode dengan indeks “ 0 ” melekat pada elemen yang dipilih. Hasilnya disimpan dalam variabel “ Daftar demo ” yang kemudian dicetak di halaman web menggunakan “ innerHTML ' Properti.
Setelah kompilasi selesai, outputnya seperti ini:
Outputnya menunjukkan nama kelas CSS yang pertama kali diterapkan pada elemen yang dipilih dan diambil.
Metode 6: Properti panjang
“ panjang ” Properti tokenList mengembalikan jumlah elemen atau kelas yang ditetapkan yang diterapkan pada elemen yang dipilih. Proses implementasinya dinyatakan di bawah ini:
< naskah >fungsi tindakan ( ) {
biarkan mereka menghancurkannya = dokumen. dapatkanElementById ( 'kasus penggunaan' ) . Daftar kelas . panjang ;
dokumen. dapatkanElementById ( 'kasus penggunaan' ) . innerHTML = menghancurkan ;
}
naskah >
Di blok kode di atas:
- Pertama, “ panjang ” properti melekat pada “ Daftar kelas ” properti untuk mengambil jumlah kelas yang ditetapkan pada elemen yang dipilih.
- Selanjutnya, hasil properti disimpan dalam variabel “ menghancurkan ” yang akan ditampilkan di halaman web pada elemen dengan id “ kasus penggunaan ”.
- Kode lainnya tetap sama seperti pada bagian di atas.
Output yang dihasilkan setelah kompilasi dinyatakan di bawah ini:
Outputnya mengembalikan kelas yang diterapkan pada elemen.
Metode 7: Metode Ganti()
“ mengganti ()” adalah metode yang mengambil setidaknya dua parameter dan mengganti parameter pertama dengan parameter kedua untuk elemen yang dipilih, seperti yang ditunjukkan di bawah ini:
< naskah >fungsi tindakan ( ) {
biarkan demoList = dokumen. dapatkanElementById ( 'kasus penggunaan' ) . Daftar kelas . mengganti ( 'ukuran huruf' , 'warna' ) ;
}
naskah >
Di sini, CSSnya “ ukuran huruf ” kelas diganti dengan CSS “ warna ” kelas untuk elemen dengan id “ kasus penggunaan ”. Kode HTML dan CSS lainnya tetap sama seperti pada bagian di atas.
Setelah memodifikasi “ naskah ” bagian dan kompilasi file HTML utama, outputnya terlihat seperti ini:
Outputnya menunjukkan bahwa kelas CSS tertentu telah diganti dengan kelas lain.
Metode 8: Nilai Properti
“ nilai ” properti daftar token mengambil nilai yang diperlukan yang ditetapkan ke elemen HTML yang dipilih. Saat dipasang di sebelah “ Daftar kelas ”, kelas yang ditetapkan ke elemen yang dipilih akan diambil, seperti yang ditunjukkan di bawah ini:
< naskah >fungsi tindakan ( ) {
biarkan demoVal = dokumen. dapatkanElementById ( 'kasus penggunaan' ) . Daftar kelas . nilai ;
dokumen. dapatkanElementById ( 'mencetak' ) . innerHTML = demoVal ;
}
naskah >
Deskripsi cuplikan kode yang disebutkan di atas:
- Di dalam ' tindakan ()” badan fungsi, “ nilai ” properti terlampir di sebelah “ Daftar kelas ” properti untuk mengambil semua kelas yang ditetapkan dari elemen HTML yang dipilih.
- Selanjutnya, hasil dari properti di atas disimpan dalam variabel “ demoVal ” dan disisipkan di atas elemen yang memiliki id “print”.
Setelah tahap kompilasi berakhir, keluaran pada halaman web dihasilkan sebagai berikut:
Outputnya menunjukkan nama kelas CSS yang diterapkan pada elemen yang dipilih.
Kesimpulan
Objek HTML DOM TokenList seperti array yang menyimpan beberapa metode dan properti yang digunakan untuk menerapkan fungsionalitas tertentu pada elemen HTML yang disediakan. Beberapa metode terpenting dan banyak digunakan yang disediakan oleh TokenList adalah “ tambahkan()”, “hapus()”, “toggle()”, “berisi()”, “item()”, dan “ganti() ”. Properti yang disediakan oleh TokenList adalah “ panjang ' Dan ' nilai ”. Artikel ini telah menjelaskan prosedur untuk bekerja dengan objek JavaScript HTML DOMTokenList.