Sommario: in questo tutorial, imparerete come usare il metodo JavaScript getElementsByName() per ottenere elementi con un dato nome in un documento.
Introduzione al metodo JavaScript getElementsByName()
Ogni elemento di un documento HTML può avere un attributo name:
Code language: HTML, XML (xml)<input type="radio" name="language" value="JavaScript">
A differenza dell’attributo id, più elementi HTML possono condividere lo stesso value dell’attributo name come questo:
Code language: HTML, XML (xml)<input type="radio" name="language" value="JavaScript"><input type="radio" name="language" value="TypeScript">
Per ottenere tutti gli elementi con un nome specificato, si usa il metodo getElementsByName() dell’oggetto document:
Code language: JavaScript (javascript)let elements = document.getElementsByName(name);
Il getElementsByName() accetta un name che è il valore dell’attributo name degli elementi e restituisce un NodeList vivo di elementi.
L’insieme di elementi di ritorno è vivo. Significa che gli elementi di ritorno vengono automaticamente aggiornati quando elementi con lo stesso nome vengono inseriti e/o rimossi dal documento.
Esempio JavaScript getElementsByName()
L’esempio seguente mostra una lista di pulsanti radio che hanno lo stesso nome (rate).
Quando si fa clic sul pulsante Rate, la pagina mostrerà un dialogo di avviso che visualizza la valutazione del servizio come Very PoorPoorOKGood, e 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>
Come funziona:
- Prima di tutto, selezionate il pulsante Rate dal suo id
btnRateusando il metodogetElementById(). - In secondo luogo, agganciare un evento click al pulsante Rate in modo che quando il pulsante viene cliccato, viene eseguita una funzione anonima.
- In terzo luogo, chiamate il
getElementsByName()nelclickgestore dell’evento per selezionare tutti i pulsanti radio che hanno il nomerate. - Infine, iterate sui pulsanti radio. Se un pulsante radio è selezionato, allora visualizzate un avviso che mostra il valore del pulsante radio selezionato.
Nota che imparerai a conoscere eventi come click più tardi. Per ora, dovete solo concentrarvi sul metodo getElementsByName().
Summario
- Il
getElementsByName()restituisce unNodeListlive di elementi con un nome specificato. - Il
NodeListè un oggetto simile ad un array, non un oggetto array.
- Questo tutorial è stato utile?