Obtenir un élément par nom en JavaScript

1. Obtenir l’élément par getElementsByName() en JavaScript
2. Obtenir l’élément par querySelectorAll() en JavaScript

Il existe des moyens d’obtenir un élément comme getElementById() et getElementByClass(). Mais que se passe-t-il si vous souhaitez sélectionner/modifier tous les éléments avec un nom spécifique ?

JavaScript fournit la méthode querySelectorAll() ou getElementsByName() pour effectuer cette tâche.

Cet article présentera comment obtenir des éléments par leur nom en JavaScript.

Obtenir l’élément par getElementsByName() en JavaScript

getElementsByName est une méthode document intégrée qui renvoie l’élément Objects/NodeList dont l’attribut name correspond au nom spécifié. Cette NodeList représente un tableau de nœuds accessibles à l’aide d’un index, et cet index commence par 0 comme tout autre tableau.

Syntaxe

document.getElementsByName(name);

name est un paramètre obligatoire qui spécifie le name d’un attribut HTML qui doit correspondre. Il renvoie l’objet de l’élément DOM correspondant si les éléments sont trouvés ; sinon, il renvoie null.

La différence entre getElementsByName et querySelectorAll est que getElementsByName sélectionne d’abord uniquement les éléments dont l’attribut de nom spécifié correspond au nom donné. Tandis que querySelectorAll peut utiliser n’importe quel sélecteur, offrant plus de flexibilité.

Pour plus d’informations, lisez la documentation de la méthode getElementById.

Exemple de code :

<div>
  <label>First Name</label>
  <input type="text" id="firstName" name="firstName" value="John">
</div>
<div>
  <label>Last Name</label>
  <input type="text" id="lastName" name="lastName" value="Doe">
</div>

const firstName = document.getElementsByName('firstName');
const lastName = document.getElementsByName('lastName');
console.log(firstName[0].value);
console.log(lastName[0].value);

Le code ci-dessus définit deux éléments d’entrée avec firstName et lastName. Lorsque nous accédons au document avec getElementsByName(), il trouve tous les nœuds dont l’attribut name correspond au prénom et renvoie NodeList. Puisqu’il s’agit d’un tableau, nous pouvons extraire le premier élément correspondant avec [0]. Si plusieurs éléments correspondants sont trouvés, vous pouvez parcourir et imprimer toutes les valeurs dans le tableau. La sortie ressemblera à ceci :

Production :

John
Doe

Obtenir l’élément par querySelectorAll() en JavaScript

querySelectorAll() est une méthode document intégrée qui renvoie les objets Element / NodeList dont les sélecteurs correspondent aux sélecteurs spécifiés. Plusieurs sélecteurs peuvent également être transférés.

La différence entre querySelectorAll() et querySelector() est que tous les objets de l’élément correspondant sont renvoyés en premier, puis l’objet de l’élément correspondant unique. Si un sélecteur invalide est passé, une SyntaxError s’affiche.

Syntaxe

document.querySelectorAll(selectors);

selectors est un paramètre obligatoire qui spécifie le selector d’un attribut HTML qui doit correspondre. Vous pouvez passer plusieurs sélecteurs en séparant des virgules. Par exemple, document.querySelectorAll('input[name=firstName]') trouve tous les éléments d’entrée dont le nom est firstName. Il renvoie les objets d’élément DOM correspondants si des éléments correspondants sont trouvés ; sinon, il renvoie une NodeList vide.

Pour plus d’informations, consultez la documentation de la méthode querySelectorAll.

Exemple de code :

<div>
  <label>FirstName</label>
  <input type="text" id="firstName" value="John">
</div>
<div>
  <label>Last Name</label>
  <input type="text" id="lastName" value="Doe">
</div>

const selectors = document.querySelectorAll('input[name=firstName]');
console.log(selectors.length, selectors[0].value);

Le code ci-dessus définit deux éléments d’entrée avec firstName et lastName. Lorsque nous accédons au document avec querySelectorAll(), il trouve tous les nœuds dont l’attribut name correspond au nom donné et renvoie NodeList. Puisqu’il s’agit d’un tableau, nous pouvons extraire le premier élément correspondant avec [0]. Si plus d’un élément aléatoire est trouvé, vous pouvez itérer sur la matrice et imprimer toutes les valeurs. La sortie ressemblera à ceci :

Production :

1
John