JavaScript Get Element by Name - HTML
Dans diverses situations, les programmeurs doivent obtenir l'élément HTML par l'attribut de nom. 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»L'attribut est utilisé pour regrouper les contrôles de formulaire liés et le même nom peut être fourni à de nombreux contrôles, ce qui leur permet d'être accessible en tant que groupe unique.
Cet article illustrera les méthodes pour récupérer un élément HTML par nom en JavaScript.
Comment obtenir des éléments par nom en javascript?
Dans JavaScript, vous pouvez accéder à un élément HTML en utilisant son attribut de nom à l'aide des méthodes JavaScript prédéfinies suivantes:
-
- Méthode GetElementsByName ()
- Méthode QueySelectorall ()
Méthode 1: Obtenez un élément par nom à l'aide de la méthode "getElementsByName ()"
Pour obtenir l'élément HTML par nom, utilisez le «getElementsByName ()" méthode. Cette méthode donne une collection d'éléments qui ont l'attribut de nom 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 qui est utilisé pour obtenir l'élément HTML"bouton". Joignez l'événement OnClick avec le sixième bouton qui appellera le «ApplyStyle ()”Fonction pour styliser les cinq boutons:
Définir une fonction "ApplyStyle ()"Cela se déclenchera sur le bouton cliquer et modifie la couleur d'arrière-plan 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:
function appliquée ()
const btns = document.getElementsByName ("btn");
BTNS.foreach (btn =>
btn.style.fond = "CadetBlue";
);
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: Obtenez l'élément par nom à l'aide de la méthode «queySelectorall ()»
Vous pouvez également utiliser le «queySelectorall ()«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 correspond à un sélecteur / attribut spécifié tel que la classe CSS, l'identifiant ou le nom.
Syntaxe
La syntaxe donnée est utilisée pour obtenir l'élément par son nom en utilisant le «queySelectorall () " méthode:
document.queySelectorall ('[name = "n1"]');
Exemple
Dans l'exemple suivant, nous changerons la couleur de uniquement ces boutons dont le nom est «btn1»:
Dans la fonction définie, nous appellerons d'abord l'accès à tous les éléments de bouton dont le nom est «btn1«Et puis appliquez un style dessus:
function appliquée ()
const btns = document.queySelectorall ('[name = "btn1"]');
BTNS.foreach (btn =>
btn.style.fond = "CadetBlue";
);
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 un document.QuerySelector au lieu du document.Queryselectorall.
Conclusion
Pour obtenir ou récupérer un élément par son nom, utilisez le «getElementsByName ()" ou la "queySelectorall ()«Méthodes. La méthode la plus couramment et la plus utilisée pour obtenir l'élément par son nom est la méthode «GetElementByName ()». Ce post a illustré les méthodes pour récupérer un élément HTML par nom en JavaScript.