Zusammenfassung: In diesem Tutorial lernen Sie, wie Sie die JavaScript-Methode getElementsByName()
verwenden, um Elemente mit einem bestimmten Namen in einem Dokument zu erhalten.
Einführung in die JavaScript-Methode getElementsByName()
Jedes Element in einem HTML-Dokument kann ein name
-Attribut haben:
Code language: HTML, XML (xml)<input type="radio" name="language" value="JavaScript">
Im Gegensatz zum id
-Attribut können sich mehrere HTML-Elemente das gleiche value
des name
-Attributs wie folgt teilen:
Code language: HTML, XML (xml)<input type="radio" name="language" value="JavaScript"><input type="radio" name="language" value="TypeScript">
Um alle Elemente mit einem bestimmten Namen zu erhalten, verwenden Sie die Methode getElementsByName()
des Objekts document
:
Code language: JavaScript (javascript)let elements = document.getElementsByName(name);
Das getElementsByName()
nimmt ein name
an, das den Wert des name
-Attributs von Elementen und gibt ein Live-NodeList
von Elementen zurück.
Die Rückgabesammlung von Elementen ist live. Das bedeutet, dass die zurückgegebenen Elemente automatisch aktualisiert werden, wenn Elemente mit demselben Namen in das Dokument eingefügt und/oder aus ihm entfernt werden.
Beispiel für JavaScript getElementsByName()
Das folgende Beispiel zeigt eine Liste von Optionsfeldern, die denselben Namen haben (rate
).
Wenn Sie auf die Schaltfläche „Bewerten“ klicken, zeigt die Seite einen Warndialog an, der die Bewertung des Dienstes anzeigt (Very Poor
Poor
OK
Good
, und 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>
Wie es funktioniert:
- Zuerst wählen Sie die Schaltfläche „Bewerten“ über ihre id
btnRate
mit der MethodegetElementById()
aus. - Zweitens, haken Sie ein Klick-Ereignis an die Schaltfläche „Rate“, so dass beim Anklicken der Schaltfläche eine anonyme Funktion ausgeführt wird.
- Drittens: Rufen Sie das
getElementsByName()
imclick
-Ereignishandler auf, um alle Optionsschaltflächen auszuwählen, die den Namenrate
haben. - Schließlich iterieren Sie über die Optionsschaltflächen. Wenn ein Optionsfeld markiert ist, dann zeigen Sie eine Meldung an, die den Wert des ausgewählten Optionsfeldes anzeigt.
Beachten Sie, dass Sie später noch etwas über Ereignisse wie click
lernen werden. Für den Moment müssen Sie sich nur auf die Methode getElementsByName() konzentrieren.
Zusammenfassung
- Das
getElementsByName()
gibt ein lebendesNodeList
von Elementen mit einem angegebenen Namen zurück. - Das
NodeList
ist ein Array-ähnliches Objekt, kein Array-Objekt.
- War dieses Tutorial hilfreich?
- JaNein