Dans diverses situations, les programmeurs doivent obtenir l'élément HTML par l'attribut name. Supposons que le développeur souhaite accéder à un contrôle de formulaire, comme un bouton radio ou une case à cocher, afin de lire ou de manipuler sa valeur. Plus précisément, le « nom ” est utilisé pour regrouper les contrôles de formulaire associés et le même nom peut être attribué à plusieurs contrôles, leur permettant d'être accessibles en tant que groupe unique.
Cet article illustrera les méthodes pour récupérer un élément HTML par son nom en JavaScript.
Comment obtenir des éléments par nom en JavaScript ?
En JavaScript, vous pouvez accéder à un élément HTML en utilisant son attribut name à l'aide des méthodes JavaScript prédéfinies suivantes :
-
- Méthode getElementsByName()
- Méthode querySelectorAll()
Méthode 1 : obtenir un élément par nom à l'aide de la méthode 'getElementsByName()'
Pour obtenir l'élément HTML par son nom, utilisez le ' getElementsByName() ' méthode. Cette méthode donne une collection d'éléments qui ont l'attribut name spécifié.
Syntaxe
La syntaxe suivante est utilisée pour la méthode getElementsByName() :
document.getElementsByName ( 'nom' )
Exemple
Tout d'abord, créez six boutons. Cinq d'entre eux ont un ' nom ' attribut utilisé pour obtenir l'élément HTML ' bouton ”. Attachez l'événement onclick avec le sixième bouton qui appellera le ' appliquerStyle() ” pour styliser les cinq boutons :
< bouton nom = 'btn' > Bouton bouton >< bouton nom = 'btn' > Bouton bouton >
< bouton nom = 'btn' > Bouton bouton >
< bouton nom = 'btn' > Bouton bouton >
< bouton nom = 'btn' > Bouton bouton > < Br >< Br >
< bouton onclick = 'appliquerStyle()' > Cliquez ici bouton >
Définir une fonction ' appliquerStyle() ” qui se déclenchera sur le clic du bouton et changera la couleur de fond de tous les boutons. Pour ce faire, d'abord, obtenez tous les ' bouton ” éléments en tant que groupe en appelant le “ getElementsByName() ' méthode:
const btns = document.getElementsByName ( 'btn' ) ;
btns.forEach ( bt = > {
btn.style.background = 'bleu cadet' ;
} ) ;
}
Comme vous pouvez le voir dans la sortie en cliquant sur le bouton, la couleur d'arrière-plan des cinq boutons sera modifiée :
Méthode 2 : Obtenir un élément par son nom à l'aide de la méthode 'querySelectorAll()'
Vous pouvez également utiliser le ' querySelectorAll() ” méthode pour obtenir des éléments en utilisant le “ nom ” attribut en JavaScript. Cette méthode est utilisée pour récupérer tous les éléments d'un document qui correspondent à un sélecteur/attribut spécifié, tel qu'une classe CSS, un identifiant ou un nom.
Syntaxe
La syntaxe donnée est utilisée pour obtenir l'élément par son nom en utilisant le ' querySelectorAll()' méthode:
document.querySelectorAll ( '[nom='n1']' ) ;
Exemple
Dans l'exemple suivant, nous ne changerons la couleur que des boutons dont le nom est ' btn1 ” :
< div >< nom du bouton = 'btn' > Bouton bouton >
< nom du bouton = 'btn1' > Bouton bouton >
< nom du bouton = 'btn' > Bouton bouton >
< nom du bouton = 'btn1' > Bouton bouton >
< nom du bouton = 'btn' > Bouton bouton > < Br >< Br >
< bouton onclick = 'appliquerStyle()' > Cliquez ici bouton >
div >
Dans la fonction définie, nous appellerons d'abord accéder à tous les éléments du bouton dont le nom est ' btn1 ” puis appliquez-y un style:
const btns = document.querySelectorAll ( '[nom='btn1']' ) ;
btns.forEach ( bt = > {
btn.style.background = 'bleu cadet' ;
} ) ;
}
La sortie donnée signifie que seuls deux boutons ont changé leur couleur d'arrière-plan dont le nom est 'btn1':
Note: Si vous souhaitez obtenir un seul élément, il est recommandé d'utiliser document.querySelector au lieu de document.querySelectorAll.
Conclusion
Pour obtenir ou récupérer un élément par son nom, utilisez le ' getElementsByName() ' ou la ' querySelectorAll() ” méthodes. La méthode la plus couramment et la plus efficacement utilisée pour obtenir l'élément par son nom est la méthode 'getElementsByName()'. Ce billet illustrait les méthodes pour récupérer un élément HTML par son nom en JavaScript.