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 :
Code language: HTML, XML (xml)<input type="radio" name="language" value="JavaScript">
À la différence de l’attribut id, plusieurs éléments HTML peuvent partager le même value de l’attribut name comme ceci :
Code language: HTML, XML (xml)<input type="radio" name="language" value="JavaScript"><input type="radio" name="language" value="TypeScript">
Pour obtenir tous les éléments portant un nom spécifié, vous utilisez la méthode getElementsByName() de l’objet document :
Code language: JavaScript (javascript)let elements = document.getElementsByName(name);
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 :
Code language: HTML, XML (xml)<!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>
Comment ça marche :
- D’abord, sélectionnez le bouton Rate par son id
btnRateen utilisant la méthodegetElementById(). - 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énementsclickpour sélectionner tous les boutons radio qui ont le nomrate. - 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 uneNodeListvivante des éléments avec un nom spécifié. - La
NodeListest un objet de type tableau, et non un objet tableau.
- Ce tutoriel a-t-il été utile ?
- OuiNon
.