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 PoorPoorOKGood, 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
btnRatemit 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 Namenratehaben. - 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 lebendesNodeListvon Elementen mit einem angegebenen Namen zurück. - Das
NodeListist ein Array-ähnliches Objekt, kein Array-Objekt.
- War dieses Tutorial hilfreich?
- JaNein