Cet article explique brièvement ce qu'est la méthode 'click()' de l'élément DOM et comment l'utiliser en HTML ?
Qu'est-ce que la méthode 'click()' de l'élément DOM en HTML ?
Lorsque la méthode click() est appelée sur un élément HTML, elle simule un utilisateur cliquant sur l'élément avec la souris, ce qui déclenche à son tour tous les gestionnaires d'événements attachés. Cela permet aux développeurs d'effectuer plusieurs actions interactives telles que l'ouverture de liens, la soumission de formulaires ou le basculement de la visibilité des éléments sans avoir besoin d'un clic de souris physique. Cela aide à créer des pages Web interactives et réactives.
Comment utiliser la méthode 'click()' de l'élément DOM en HTML ?
Pour utiliser la méthode click(), les utilisateurs doivent d'abord obtenir une référence à l'élément HTML pour simuler un clic. Cela peut être fait en utilisant l'une des méthodes standard de traversée ou de requête DOM, telles que ' getElementById ”, “ getElementsByClassName ”, “ querySelector ', ou ' querySelectorAll ”.
Passons en revue un exemple pour une meilleure explication de la méthode 'click ()'.
Exemple : éléments de case à cocher HTML et de bouton radio
Un exemple est considéré dans lequel le ' Cliquez sur() ” La méthode est utilisée avec la case à cocher HTML et les éléments de bouton radio. Suivez le code ci-dessous :
< former >
< saisir
taper = 'case à cocher'
identifiant = 'case à cocher1'
surmouseover = 'forCheckbox()'
>
Propulsé par Linuxhint
< saisir
taper = 'radio'
identifiant = 'bouton radio'
surmouseover = 'pourRadio()'
>
Propulsé par Linuxhint
< / former >
Dans l'extrait de code ci-dessus :
- Tout d'abord, une case à cocher est créée sur la page Web en utilisant la balise avec un type défini sur ' case à cocher ”.
- Après cela, l'écouteur d'événement ' surmouseover ' est attaché à la case à cocher et invoque le ' forCheckbox() ' fonction.
- De la même manière, le « radio ” est créé à l'aide du bouton “
” et l'écouteur d'événement y est attaché. Mais cette fois, le « pourRadio() ” la fonction est invoquée.
Après la création d'un élément HTML sur la page Web, il est maintenant temps d'ajouter le ' Cliquez sur() ' méthode:
< scénario >
fonction pour la case à cocher ( ) {
document.getElementById ( 'case à cocher1' ) .Cliquez sur ( ) ;
}
fonction pourRadio ( ) {
document.getElementById ( 'bouton radio' ) .Cliquez sur ( ) ;
}
< / scénario >
Dans l'extrait de code ci-dessus :
- Tout d'abord, définissez deux fonctions JavaScript, ' forCheckbox() ' et ' pourRadio() ”.
- Ces fonctions utilisent le ' document.getElementById() » pour obtenir des références aux éléments HTML de la page avec des identifiants spécifiques « checkbox1 » et « radioButton ».
- Pour la simulation du clic sur l'élément HTML, la méthode click() est utilisée. Cette fonction active ou désactive l'état lorsqu'elle est appelée.
Après l'exécution des extraits de code ci-dessus, la sortie apparaît comme ceci :
Le gif ci-dessus illustre que l'état de la case à cocher et du bouton radio change à l'aide de la méthode 'click ()'.
Conclusion
La méthode click() est particulièrement utile pour gérer les interactions de l'utilisateur avec une page Web via JavaScript.
Au lieu de compter sur l'utilisateur pour cliquer physiquement sur l'élément, utilisez la méthode click() pour simuler l'événement click par programmation. Il est utile pour créer des conceptions interactives et conviviales. Cet article a démontré avec succès la signification de la méthode 'click()' de l'élément DOM en HTML.