Podsumowanie: w tym tutorialu, nauczysz się jak używać metody JavaScript getElementsByName()
do uzyskania elementów o podanej nazwie w dokumencie.
Wprowadzenie do metody JavaScript getElementsByName()
Każdy element w dokumencie HTML może mieć atrybut name
:
Code language: HTML, XML (xml)<input type="radio" name="language" value="JavaScript">
W przeciwieństwie do atrybutu id
, wiele elementów HTML może współdzielić ten sam value
atrybut name
w taki sposób:
Code language: HTML, XML (xml)<input type="radio" name="language" value="JavaScript"><input type="radio" name="language" value="TypeScript">
Aby uzyskać wszystkie elementy o podanej nazwie, używamy metody getElementsByName()
obiektu document
:
Code language: JavaScript (javascript)let elements = document.getElementsByName(name);
Metoda getElementsByName()
przyjmuje name
, który jest. wartość atrybutu name
elementów i zwraca żywą NodeList
elementów.
Zbiór zwracanych elementów jest żywy. Oznacza to, że zwracane elementy są automatycznie aktualizowane, gdy elementy o tej samej nazwie są wstawiane i/lub usuwane z dokumentu.
Przykład JavaScript getElementsByName()
Następujący przykład przedstawia listę przycisków radiowych, które mają tę samą nazwę (rate
).
Kiedy użytkownik kliknie przycisk Oceń, strona wyświetli okno dialogowe alertu, które wyświetli ocenę usługi, taką jak Very Poor
Poor
OK
Good
, oraz 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>
Jak to działa:
- Najpierw wybierz przycisk Oceń po jego id
btnRate
za pomocą metodygetElementById()
. - Po drugie, zaczep zdarzenie click do przycisku Rate tak, aby po kliknięciu przycisku została wykonana anonimowa funkcja.
- Po trzecie, wywołaj metodę
getElementsByName()
w obsłudze zdarzeniaclick
, aby wybrać wszystkie przyciski radiowe, które mają nazwęrate
. - Na koniec, wykonaj iterację po przyciskach radiowych. Jeśli przycisk radiowy jest zaznaczony, to wyświetl alert, który pokazuje wartość wybranego przycisku radiowego.
Zauważ, że dowiesz się o zdarzeniach takich jak click
później. Na razie wystarczy skupić się na metodzie getElementsByName().
Podsumowanie
- Metoda
getElementsByName()
zwraca na żywoNodeList
elementów o podanej nazwie. - The
NodeList
is an array-like object, not an array object.
- Was this tutorial helpful ?
- TakNie