Articles

JavaScript getElementsByName

Posted on

Résumé : dans ce tutoriel, vous apprendrez à utiliser la méthode JavaScript getElementsByName() pour obtenir des éléments avec un nom donné dans un document.

Introduction à la méthode JavaScript getElementsByName()

Chaque élément d’un document HTML peut avoir un attribut name :

<input type="radio" name="language" value="JavaScript">
Code language: HTML, XML (xml)

À la différence de l’attribut id, plusieurs éléments HTML peuvent partager le même value de l’attribut name comme ceci :

<input type="radio" name="language" value="JavaScript"><input type="radio" name="language" value="TypeScript">
Code language: HTML, XML (xml)

Pour obtenir tous les éléments portant un nom spécifié, vous utilisez la méthode getElementsByName() de l’objet document :

let elements = document.getElementsByName(name);
Code language: JavaScript (javascript)

La getElementsByName() accepte une name qui est la valeur de l’attribut name des éléments et renvoie un NodeList vivant d’éléments.

La collection d’éléments de retour est vivante. Cela signifie que les éléments de retour sont automatiquement mis à jour lorsque des éléments portant le même nom sont insérés et/ou supprimés du document.

Exemple de JavaScript getElementsByName()

L’exemple suivant montre une liste de boutons radio qui portent le même nom (rate).

Lorsque vous cliquez sur le bouton Rate, la page affiche une boîte de dialogue d’alerte qui affiche la note du service comme Very PoorPoorOKGood, et Very Good :

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JavaScript getElementsByName Demo</title></head><body> <p>Please rate the service:</p> <p> <input type="radio" name="rate" value="Very poor"> Very poor <input type="radio" name="rate" value="Poor"> Poor <input type="radio" name="rate" value="OK"> OK <input type="radio" name="rate" value="Good"> Good <input type="radio" name="rate" value="Very Good"> Very Good </p> <p> <button>Submit</button> </p> <script> let btn = document.getElementById('btnRate'); btn.addEventListener('click', () => { let rates = document.getElementsByName('rate'); rates.forEach((rate) => { if (rate.checked) { alert(`You rated: ${rate.value}`); } }) }); </script></body></html>
Code language: HTML, XML (xml)

Comment ça marche :

  • D’abord, sélectionnez le bouton Rate par son id btnRate en utilisant la méthode getElementById().
  • Deuxièmement, accrochez un événement de clic au bouton Taux de sorte que lorsque le bouton est cliqué, une fonction anonyme est exécutée.
  • Troisièmement, appelez le getElementsByName() dans le gestionnaire d’événements click pour sélectionner tous les boutons radio qui ont le nom rate.
  • Enfin, itérez sur les boutons radio. Si un bouton radio est coché, alors affichez une alerte qui montre la valeur du bouton radio sélectionné.

Notez que vous apprendrez à connaître les événements comme click plus tard. Pour l’instant, vous devez simplement vous concentrer sur la méthode getElementsByName().

Summary

  • La getElementsByName() renvoie une NodeList vivante des éléments avec un nom spécifié.
  • La NodeList est un objet de type tableau, et non un objet tableau.
  • Ce tutoriel a-t-il été utile ?
  • OuiNon

.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *