Comment parcourir tous les éléments avec la même CLASS en JavaScript ?

Réponses rédigées par Antoine
Dernière mise à jour : 2020-10-10 11:39:13
Thèmes : webmaster - html - javascript
Question

Je cherche à récupérer avec JavaScript, la valeur de plusieurs input texte, ils disposent tous de la même class :

<input type="text" class="exemple" name="champ 1" value="un">
<input type="text" class="exemple" name="champ 2" value="deux"> 
<input type="text" class="exemple" name="champ 3" value="trois">

Comment puis-je parcourir plusieurs éléments, avec la même class, en JavaScript ?

Réponse

Pour parcourir tous les éléments avec la même class, en JavaScript, vous pouvez procéder comme suit :

  • Utiliser la méthode querySelectorAll() pour récupérer tous les éléments.
  • Créer un tableau Array avec chaque élément.
  • Parcourir le tableau avec la méthode forEach().

Voici un exemple pour récupérer et afficher les valeurs et les noms de chacun des input dont la class est identique :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Comment parcourir tous les éléments avec la même class en JavaScript ?</title>  
</head>
<body> 
<input type="text" class="exemple" name="champ 1" value="un">
<input type="text" class="exemple" name="champ 2" value="deux"> 
<input type="text" class="exemple" name="champ 3" value="trois"> 
<input type="button" value="Parcourir" onclick="parcourir();">
<script> 
function parcourir()
{
var valeur = "";
const elements = document.querySelectorAll(".exemple");
Array.from(elements).forEach((element, index) => 
{
valeur += "Valeur " + element.name + ": " + element.value + "\r";
});
alert(valeur);
}
</script> 
</body> 
</html>