Articles

JavaScript getElementsByName

Posted on

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:

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

W przeciwieństwie do atrybutu id, wiele elementów HTML może współdzielić ten sam value atrybut name w taki sposób:

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

Aby uzyskać wszystkie elementy o podanej nazwie, używamy metody getElementsByName() obiektu document:

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

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:

<!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)

Jak to działa:

  • Najpierw wybierz przycisk Oceń po jego id btnRate za pomocą metody getElementById().
  • 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 zdarzenia click, 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 żywo NodeList elementów o podanej nazwie.
  • The NodeList is an array-like object, not an array object.
  • Was this tutorial helpful ?
  • TakNie

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *