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 PoorPoorOKGood, 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
btnRateza 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 żywoNodeListelementów o podanej nazwie. - The
NodeListis an array-like object, not an array object.
- Was this tutorial helpful ?
- TakNie