Articles

JavaScript getElementsByName

Posted on

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:

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

Im Gegensatz zum id-Attribut können sich mehrere HTML-Elemente das gleiche value des name-Attributs wie folgt teilen:

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

Um alle Elemente mit einem bestimmten Namen zu erhalten, verwenden Sie die Methode getElementsByName() des Objekts document:

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

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:

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

Wie es funktioniert:

  • Zuerst wählen Sie die Schaltfläche „Bewerten“ über ihre id btnRate mit der Methode getElementById() 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() im click-Ereignishandler auf, um alle Optionsschaltflächen auszuwählen, die den Namen rate 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 lebendes NodeList von Elementen mit einem angegebenen Namen zurück.
  • Das NodeList ist ein Array-ähnliches Objekt, kein Array-Objekt.
  • War dieses Tutorial hilfreich?
  • JaNein

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.