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 Poor
Poor
OK
Good
, 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
btnRate
en 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énementsclick
pour 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 uneNodeList
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
.