Artikel ini menunjukkan secara ringkas apakah Kaedah 'klik()' Elemen DOM dan cara menggunakannya dalam HTML?
Apakah Kaedah 'klik()' Elemen DOM dalam HTML?
Apabila kaedah click() dipanggil pada elemen HTML, ia mensimulasikan pengguna mengklik elemen dengan tetikus, yang seterusnya mencetuskan mana-mana pengendali acara yang dilampirkan. Ini membolehkan pembangun melakukan beberapa tindakan interaktif seperti membuka pautan, menyerahkan borang atau menogol keterlihatan elemen tanpa memerlukan klik tetikus fizikal. Ini membantu untuk mencipta halaman web yang interaktif dan responsif.
Bagaimana Menggunakan Kaedah 'klik()' Elemen DOM dalam HTML?
Untuk menggunakan kaedah klik(), pengguna terlebih dahulu perlu mendapatkan rujukan kepada elemen HTML untuk mensimulasikan klik pada. Ini boleh dilakukan menggunakan mana-mana kaedah traversal atau pertanyaan DOM standard, seperti ' getElementById ”, “ getElementsByClassName ”, “ querySelector ”, atau “ querySelectorAll ”.
Mari kita lihat contoh untuk penjelasan yang lebih baik tentang kaedah 'klik()'.
Contoh: Kotak Semak HTML dan Elemen Butang Radio
Satu contoh dipertimbangkan di mana ' klik() ” kaedah digunakan dengan kotak semak HTML dan elemen butang radio. Ikut kod di bawah:
< bentuk >
< input
menaip = 'kotak semak'
ID = 'kotak semak1'
onmouseover = 'forCheckbox()'
>
Dikuasakan oleh Linuxhint
< input
menaip = 'radio'
ID = 'butang radio'
onmouseover = 'untukRadio()'
>
Dikuasakan oleh Linuxhint
< / bentuk >
Dalam coretan kod di atas:
- Mula-mula, kotak pilihan dibuat pada halaman web dengan menggunakan teg dengan jenis ditetapkan kepada “ kotak semak ”.
- Selepas itu, pendengar acara ' onmouseover ” dilampirkan pada kotak pilihan dan memanggil “ forCheckbox() ” fungsi.
- Dengan cara yang sama, ' radio butang ” dicipta menggunakan “ teg ”, dan pendengar acara dilampirkan padanya. Tetapi kali ini, ' forRadio() fungsi ” sedang digunakan.
Selepas penciptaan elemen HTML pada halaman web, kini tiba masanya untuk menambah “ klik() ' kaedah:
< skrip >
fungsi untuk KotakSemak ( ) {
document.getElementById ( 'kotak semak1' ) .klik ( ) ;
}
fungsi untukRadio ( ) {
document.getElementById ( 'butang radio' ) .klik ( ) ;
}
< / skrip >
Dalam coretan kod di atas:
- Pertama, tentukan dua fungsi JavaScript, ' forCheckbox() ” dan “ forRadio() ”.
- Fungsi ini menggunakan ' document.getElementById() ' kaedah untuk mendapatkan rujukan kepada elemen HTML pada halaman dengan id khusus 'kotak semak1' dan 'Button radio'.
- Untuk simulasi klik pada elemen HTML, kaedah klik() digunakan. Fungsi ini menogol keadaan hidup atau mati apabila ia dipanggil.
Selepas pelaksanaan coretan kod di atas, output kelihatan seperti ini:
Gif di atas menggambarkan bahawa status kotak semak dan butang radio berubah menggunakan kaedah 'klik()'.
Kesimpulan
Kaedah click() amat berguna untuk mengendalikan interaksi pengguna dengan halaman web melalui JavaScript.
Daripada bergantung kepada pengguna untuk mengklik elemen secara fizikal, gunakan kaedah klik() untuk mensimulasikan acara klik secara pemrograman. Ia berguna untuk mencipta reka bentuk interaktif dan mesra pengguna. Artikel ini telah berjaya menunjukkan maksud kaedah 'klik()' elemen DOM dalam HTML.