Samenvatting: in deze tutorial leer je hoe je de JavaScript getElementsByName() methode kunt gebruiken om elementen met een gegeven naam in een document op te halen.
Inleiding tot JavaScript getElementsByName() methode
Elk element in een HTML-document kan een name attribuut hebben:
Code language: HTML, XML (xml)<input type="radio" name="language" value="JavaScript">
In tegenstelling tot het id attribuut, kunnen meerdere HTML-elementen hetzelfde value van het name attribuut delen, zoals dit:
Code language: HTML, XML (xml)<input type="radio" name="language" value="JavaScript"><input type="radio" name="language" value="TypeScript">
Om alle elementen met een opgegeven naam op te halen, gebruikt u de getElementsByName() methode van het document object:
Code language: JavaScript (javascript)let elements = document.getElementsByName(name);
De getElementsByName() accepteert een name dat is de waarde van het name attribuut van elementen en retourneert een levende NodeList van elementen.
De retourverzameling van elementen is live. Dat betekent dat de return-elementen automatisch worden bijgewerkt wanneer elementen met dezelfde naam worden ingevoegd en/of verwijderd uit het document.
JavaScript getElementsByName() voorbeeld
Het volgende voorbeeld toont een lijst met radioknoppen die dezelfde naam hebben (rate).
Wanneer u op de knop Rate klikt, toont de pagina een waarschuwingsdialoogvenster dat de beoordeling van de dienst weergeeft, zoals Very PoorPoorOKGood, en 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>
Hoe het werkt:
- Selecteer eerst de Rate-knop op basis van zijn id
btnRatemet behulp van degetElementById()-methode. - Tweede, haak een klikgebeurtenis aan de Tarief-knop zodat wanneer op de knop wordt geklikt, een anonieme functie wordt uitgevoerd.
- Derde, roep de
getElementsByName()in declickevent handler op om alle radio buttons te selecteren die de naamratehebben. - Eindig, iterate over de radio buttons. Als een keuzerondje is aangevinkt, toon dan een waarschuwing die de waarde van het geselecteerde keuzerondje weergeeft.
Merk op dat je later meer zult leren over gebeurtenissen zoals click. Voor nu hoeft u zich alleen te concentreren op de methode getElementsByName().
Summary
- De
getElementsByName()retourneert een levendeNodeListvan elementen met een opgegeven naam. - De
NodeListis een array-achtig object, geen array-object.
- Was deze handleiding nuttig ?
- JaNee