Aquest article demostra breument què és el mètode 'clic ()' de l'element DOM i com utilitzar-lo en HTML?
Què és el mètode 'click()' de l'element DOM en HTML?
Quan es crida al mètode click() en un element HTML, simula un usuari fent clic a l'element amb el ratolí, que al seu torn activa qualsevol controlador d'esdeveniments adjunt. Això permet als desenvolupadors realitzar diverses accions interactives com ara obrir enllaços, enviar formularis o canviar la visibilitat dels elements sense necessitat de fer clic físic amb el ratolí. Això ajuda a crear pàgines web interactives i responsives.
Com utilitzar el mètode 'clic ()' de l'element DOM en HTML?
Per utilitzar el mètode click(), els usuaris primer han d'obtenir una referència a l'element HTML per simular un clic. Això es pot fer utilitzant qualsevol dels mètodes estàndard de consulta o de recorregut DOM, com ara ' getElementById ”, “ getElementsByClassName ”, “ querySelector ”, o “ querySelectorAll ”.
Passem per un exemple per a una millor explicació del mètode 'clic ()'.
Exemple: casella de selecció HTML i elements del botó de ràdio
Es considera un exemple en què el “ clic () ” s'utilitza amb la casella de selecció HTML i els elements del botó d'opció. Seguiu el codi següent:
< forma >
< entrada
tipus = 'casilla de verificació'
id = 'casilla de selecció 1'
sobre el ratolí = 'forCheckbox()'
>
Desenvolupat per Linuxhint
< entrada
tipus = 'ràdio'
id = 'botó de ràdio'
sobre el ratolí = 'forRadio()'
>
Desenvolupat per Linuxhint
< / forma >
Al fragment de codi anterior:
- En primer lloc, es crea una casella de selecció a la pàgina web utilitzant l'etiqueta amb un tipus establert a ' casella de selecció ”.
- Després d'això, l'oient de l'esdeveniment ' sobre el ratolí ' s'adjunta a la casella de selecció i invoca el ' forCheckbox() ” funció.
- De la mateixa manera, el “ ràdio El botó ' es crea amb el botó '
”, i s'hi adjunta l'oient d'esdeveniments. Però aquesta vegada, el ' forRadio() s'està invocant la funció.
Després de la creació d'un element HTML a la pàgina web, ara és el moment d'afegir el ' feu clic () ” mètode:
< guió >
funció per Checkbox ( ) {
document.getElementById ( 'casilla de selecció 1' ) .clic ( ) ;
}
funció per a la ràdio ( ) {
document.getElementById ( 'botó de ràdio' ) .clic ( ) ;
}
< / guió >
Al fragment de codi anterior:
- Primer, definiu dues funcions de JavaScript, ' forCheckbox() ' i ' forRadio() ”.
- Aquestes funcions utilitzen el ' document.getElementById() ” per obtenir referències a elements HTML de la pàgina amb identificadors específics “checkbox1” i “radioButton”.
- Per a la simulació de fer clic a l'element HTML, s'utilitza el mètode click(). Aquesta funció activa o desactiva l'estat quan es crida.
Després de l'execució dels fragments de codi anteriors, la sortida apareix així:
El gif anterior il·lustra que l'estat de la casella de selecció i el botó d'opció està canviant mitjançant el mètode 'clic ()'.
Conclusió
El mètode click() és especialment útil per gestionar les interaccions de l'usuari amb una pàgina web mitjançant JavaScript.
En lloc de confiar en que l'usuari faci clic físicament a l'element, utilitzeu el mètode click() per simular l'esdeveniment de clic amb programació. És útil per crear dissenys interactius i fàcils d'utilitzar. Aquest article ha demostrat amb èxit el significat del mètode 'click()' de l'element DOM en HTML.