DOM ' Senarai Token ” mengandungi banyak sifat atau kaedah yang boleh diakses oleh pengguna akhir mengikut keperluan mereka. Sifat dan kaedah yang disediakan oleh senarai ini melaksanakan operasi khusus ke atas set data yang disediakan dan mengembalikan hasilnya dengan sewajarnya. Ia lebih seperti tatasusunan kerana ia mempunyai pelbagai ahli yang boleh dipilih oleh indeks mereka dan sama seperti tatasusunan indeks pertama ialah ' 0 ”. Tetapi anda tidak boleh menggunakan kaedah seperti “ pop()”, “push()” atau “join() ”.
Blog ini akan menerangkan cara kerja HTML DOMTokenList Objects oleh JavaScript.
Bagaimana untuk Bekerja Dengan Objek DOMTokenList HTML JavaScript?
HTML DOMTokenList bukan apa-apa dengan sendirinya dan nilainya hanya disebabkan oleh sifat dan kaedah yang ada di dalamnya. Mari lawati sifat dan kaedah ini secara terperinci bersama dengan pelaksanaan yang betul.
Kaedah 1: Kaedah Tambah().
' Tambah ()” melampirkan atau memberikan kelas baharu, sifat atau token mudah dengan elemen yang dipilih. Sintaksnya dinyatakan di bawah:
htmlElemen. Tambah ( oneOrMoreToken )
Pelaksanaannya dilakukan melalui kod berikut:
< kepala >
< gaya >
.Saiz huruf{
saiz fon: besar;
}
.warna{
warna latar belakang: biru kadet;
warna: asap putih;
}
< / gaya >
< / kepala >
< badan >
< h1 gaya = 'warna: kadet biru;' > Linux < / h1 >
< butang onclick = 'tindakan()' > Penambah < / butang >
< hlm > Tekan Butang di atas untuk Menggunakan Penggayaan < / hlm >
< div ID = 'dipilih' >
< hlm > Saya Teks Terpilih. < / hlm >
< / div >
< skrip >
tindakan fungsi() {
document.getElementById('selected').classList.add('fontSize', 'color');
}
< / skrip >
< / badan >
Penjelasan kod di atas adalah seperti berikut:
- Pertama, pilih dua kelas CSS ' Saiz huruf ” dan “warna” dan berikan mereka sifat CSS rawak seperti “ saiz fon', 'warna latar belakang' dan 'warna ”.
- Seterusnya, buat butang menggunakan '< butang >” tag yang memanggil “ tindakan ()” menggunakan fungsi “ onclick ” pendengar acara.
- Di samping itu, buat ibu bapa ' div elemen ” dan berikannya id bagi “ dipilih ” dan masukkan data tiruan di dalamnya.
- Selepas itu, tentukan “ tindakan ()” berfungsi dan menyimpan rujukan elemen yang dipilih dengan mengakses id uniknya.
- Akhir sekali, gunakan ' Senarai kelas ' harta untuk menetapkan kelas dan melampirkan ' Tambah ()” kaedah. Kemudian, lulus kelas CSS di dalam kurungan kaedah ini dan ia akan menggunakan kelas ini pada elemen yang dipilih.
Output selepas penyusunan kod di atas dijana sebagai:
Gif di atas mengesahkan bahawa kelas CSS telah diberikan kepada elemen yang dipilih melalui ' Tambah ()” kaedah.
Kaedah 2: Kaedah Alih Keluar().
Kaedah ini mengalih keluar kelas atau id tertentu daripada satu atau lebih elemen yang dipilih seperti yang dilakukan dalam kod di bawah:
< kepala >< gaya >
.Saiz huruf {
fon- saiz : besar;
}
. warna {
latar belakang- warna : kadet biru;
warna : asap putih;
}
< / gaya >
< / kepala >
< badan >
< h1 gaya = 'warna: kadet biru;' > Linuxhint < / h1 >
< butang onclick = 'tindakan()' > Penambah< / butang >
< hlm >Tekan Butang di atas untuk Menggunakan Penggayaan< / hlm >
< div ID = 'dipilih' kelas = 'warna saiz fon' >
< hlm > saya Dipilih Teks .< / hlm >
< / div >
< skrip >
fungsi tindakan ( ) {
document.getElementById ( 'dipilih' ) .classList.buang ( 'warna' ) ;
}
< / skrip >
< / badan >
Penerangan kod di atas adalah seperti berikut:
- Pada mulanya, kod yang dijelaskan dalam kod di atas digunakan di sini sebagai contoh.
- Di sini, kedua-dua ' warna ” dan “ Saiz huruf ” kelas diperuntukkan terus kepada elemen yang dipilih.
- Selepas itu, di dalam ' tindakan ()' fungsi yang digunakan oleh ' onclick 'pendengar acara' keluarkan ()” kaedah token digunakan.
- Kaedah ini mengambil satu atau berbilang kelas yang akan dialih keluar daripada elemen yang dipilih. Dalam kes kami, ' warna ” kelas akan dialih keluar daripada elemen HTML yang dipilih.
Output untuk kod di atas dipaparkan sebagai:
Output di atas menunjukkan kelas CSS tertentu telah dialih keluar daripada elemen yang dipilih menggunakan kaedah 'buang()'.
Kaedah 3: Kaedah Togol().
' togol ()' kaedah ialah gabungan kedua-dua ' Tambah ()” dan “ keluarkan ()” kaedah. Ia mula-mula memberikan kelas CSS yang disediakan kepada elemen HTML yang dipilih dan kemudian mengalih keluarnya mengikut tindakan pengguna.
< html >< kepala >
< gaya >
.Saiz huruf {
fon- saiz : xx-besar;
}
. warna {
latar belakang- warna : kadet biru;
warna : asap putih;
}
< / gaya >
< / kepala >
< badan >
< h1 gaya = 'warna: kadet biru;' > Linuxhint < / h1 >
< butang onclick = 'tindakan()' > Penambah< / butang >
< hlm >Tekan Butang di atas untuk Menggunakan Penggayaan< / hlm >
< div ID = 'dipilih' >
< hlm > saya Dipilih Teks .< / hlm >
< / div >
< skrip >
fungsi tindakan ( ) {
document.getElementById ( 'dipilih' ) .classList.togol ( 'Saiz huruf' ) ;
}
< / skrip >
< / badan >
< / html >
Penerangan mengenai kod di atas dinyatakan di bawah:
- Program yang sama digunakan seperti yang digunakan dalam bahagian di atas, hanya ' togol ()' kaedah digantikan dengan ' keluarkan ()” kaedah.
Pada akhir fasa penyusunan, output adalah seperti berikut:
Output menunjukkan bahawa kelas CSS tertentu sedang ditambah dan dialih keluar mengikut tindakan pengguna.
Kaedah 4: Mengandungi() Kaedah
' mengandungi ()” kaedah digunakan untuk menyemak ketersediaan kelas CSS tertentu ke atas elemen HTML dan pelaksanaannya dinyatakan di bawah:
< skrip >fungsi tindakan ( ) {
biarkan x = dokumen. getElementById ( 'dipilih' ) . Senarai kelas . mengandungi ( 'Saiz huruf' ) ;
dokumen. getElementById ( 'ujian' ) . innerHTML = x ;
}
skrip >
Bahagian HTML dan CSS tetap sama. Hanya dalam '< skrip >', kaedah 'mengandungi()' digunakan pada elemen yang dipilih untuk menyemak sama ada ' Saiz huruf ” digunakan pada elemen itu atau tidak. Kemudian, hasilnya dipaparkan pada halaman web pada elemen HTML yang mempunyai id ' ujian ”.
Selepas penyusunan kod di atas, halaman web kelihatan seperti ini:
Output menunjukkan bahawa nilai ' benar ” dikembalikan yang bermaksud kelas CSS tertentu digunakan pada elemen HTML yang dipilih.
Kaedah 5: Kaedah Item().
' item ()” kaedah memilih token atau kelas CSS mengikut nombor indeksnya, bermula daripada “ 0 ', seperti yang ditunjukkan di bawah:
< badan >< gaya h1 = 'warna: kadet biru;' > Linux h1 >
< butang onclick = 'tindakan()' > Pemeriksa butang >
< hlm > CSS kelas yang ditugaskan pada mulanya , dapat diambil semula : hlm >
< id h3 = 'useCase' kelas = 'firstCls secondCls thirdCls' > h3 >
< skrip >
fungsi tindakan ( ) {
biarkan demoList = dokumen. getElementById ( 'useCase' ) . Senarai kelas . item ( 0 ) ;
dokumen. getElementById ( 'useCase' ) . innerHTML = senarai demo ;
}
skrip >
badan >
Penjelasan kod di atas:
- Pertama, berbilang kelas CSS diberikan kepada elemen pilihan kami dengan id ' useCase ” dan kaedah “tindakan()” yang digunakan melalui “ onclick ” acara.
- Dalam fungsi ini, ' item ()” kaedah dengan indeks “ 0 ” dilampirkan pada elemen yang dipilih. Hasilnya disimpan dalam pembolehubah ' senarai demo ” yang kemudiannya dicetak di atas halaman web menggunakan “ innerHTML ” harta benda.
Selepas akhir penyusunan, output datang seperti ini:
Output menunjukkan nama kelas CSS yang digunakan pada mulanya ke atas elemen yang dipilih dan diambil semula.
Kaedah 6: panjang Harta
' panjang ” harta tokenList mengembalikan bilangan elemen atau kelas yang ditetapkan yang digunakan ke atas elemen yang dipilih. Proses pelaksanaan dinyatakan di bawah:
< skrip >fungsi tindakan ( ) {
biarkan mereka merobohkan = dokumen. getElementById ( 'useCase' ) . Senarai kelas . panjang ;
dokumen. getElementById ( 'useCase' ) . innerHTML = merobohkan ;
}
skrip >
Dalam blok kod di atas:
- Pertama ' panjang ” harta dilampirkan pada “ Senarai kelas ” harta untuk mendapatkan semula bilangan kelas yang ditetapkan ke atas elemen yang dipilih.
- Seterusnya, hasil harta itu disimpan dalam pembolehubah ' merobohkan ” yang akan dipaparkan pada halaman web pada elemen dengan id “ useCase ”.
- Selebihnya kod kekal sama seperti dalam bahagian di atas.
Output yang dihasilkan selepas penyusunan dinyatakan di bawah:
Output mengembalikan kelas yang digunakan ke atas elemen.
Kaedah 7: Kaedah Ganti ().
' menggantikan ()” ialah kaedah yang mengambil sekurang-kurangnya dua parameter dan menggantikan parameter pertama dengan parameter kedua untuk elemen yang dipilih, seperti ditunjukkan di bawah:
< skrip >fungsi tindakan ( ) {
biarkan demoList = dokumen. getElementById ( 'useCase' ) . Senarai kelas . menggantikan ( 'Saiz huruf' , 'warna' ) ;
}
skrip >
Di sini, CSS ' Saiz huruf 'kelas digantikan dengan CSS' warna kelas ' untuk elemen dengan id ' useCase ”. Selebihnya kod HTML dan CSS kekal sama seperti dalam bahagian di atas.
Selepas mengubah suai ' skrip ” bahagian dan menyusun fail HTML utama, output kelihatan seperti ini:
Output menunjukkan bahawa kelas CSS tertentu telah digantikan dengan kelas lain.
Kaedah 8: Harta Nilai
' nilai ” harta senarai token mendapatkan semula nilai yang diperlukan yang diberikan kepada elemen HTML yang dipilih. Apabila ia dilampirkan di sebelah ' Senarai kelas ”, kelas yang diperuntukkan kepada elemen yang dipilih dapat diambil semula, seperti yang ditunjukkan di bawah:
< skrip >fungsi tindakan ( ) {
biarkan demoVal = dokumen. getElementById ( 'useCase' ) . Senarai kelas . nilai ;
dokumen. getElementById ( 'cetak' ) . innerHTML = demoVal ;
}
skrip >
Perihalan coretan kod yang dinyatakan di atas:
- Di dalam ' tindakan ()' badan fungsi, ' nilai ” harta dilampirkan di sebelah “ Senarai kelas ” untuk mendapatkan semula semua kelas yang diperuntukkan bagi elemen HTML yang dipilih.
- Seterusnya, hasil daripada sifat di atas disimpan dalam pembolehubah ' demoVal ” dan disisipkan di atas elemen yang mempunyai id “cetak”.
Selepas tamat fasa kompilasi, output pada halaman web dijana seperti berikut:
Output menunjukkan nama kelas CSS yang digunakan pada elemen yang dipilih.
Kesimpulan
Objek HTML DOM TokenList adalah seperti tatasusunan yang menyimpan berbilang kaedah dan sifat yang digunakan untuk menggunakan fungsi tertentu ke atas elemen HTML yang disediakan. Beberapa kaedah yang paling penting dan digunakan secara meluas yang disediakan oleh TokenList ialah “ tambah()”, “buang()”, “togol()”, “mengandungi()”, “item()”, dan “ganti() ”. Ciri-ciri yang disediakan oleh TokenList ialah “ panjang ” dan “ nilai ”. Artikel ini telah menerangkan prosedur untuk berfungsi dengan objek HTML DOMTokenList JavaScript.