JavaScript erhalten Element mit Namen - HTML
In verschiedenen Situationen müssen Programmierer das HTML -Element mit dem Namensattribut erhalten. Angenommen, der Entwickler möchte wie ein Optionsfeld oder ein Kontrollkästchen auf ein Formularsteuerung zugreifen, um seinen Wert zu lesen oder zu manipulieren. Genauer gesagt das “NameDas Attribut wird verwendet, um zu gruppierenden Formularsteuerungen zu gruppieren, und der gleiche Name kann vielen Steuerelementen zur Verfügung gestellt werden, sodass sie als einzelne Gruppe zugegriffen werden können.
Dieser Beitrag veranschaulicht die Methoden zum Abrufen eines HTML -Elements mit Namen in JavaScript.
So erhalten Sie Elemente mit Namen in JavaScript?
In JavaScript können Sie mithilfe der folgenden vordefinierten JavaScript -Methoden auf ein HTML -Element zugreifen, indem Sie das Namensattribut unter Verwendung der folgenden vordefinierten JavaScript -Methoden haben:
-
- GetElementsByName () -Methode
- QuerySelectorAll () -Methode
Methode 1: Element mit Namen mit der Methode „getElementsByName ()“ abrufen
Um das HTML -Element mit Namen zu erhalten, verwenden Sie das “GetElementsByName ()" Methode. Diese Methode enthält eine Sammlung von Elementen, die das angegebene Namensattribut haben.
Syntax
Die folgende Syntax wird für die Methode GetElementsByName () verwendet:
dokumentieren.GetElementsByName ("Name")
Beispiel
Erstellen Sie zunächst sechs Tasten. Fünf von ihnen haben eine "Name"Attribut, das verwendet wird, um das HTML -Element zu erhalten"Taste”. Fügen Sie das Onclick -Ereignis mit der sechsten Taste hinzu, die das aufruft "das"applystyle ()”Funktion, um die fünf Tasten zu stylen:
Eine Funktion definieren “applystyle ()Das wird auf der Schaltfläche Klicken und ändern die Hintergrundfarbe aller Schaltflächen aus und ändern Sie sie. Um dies zuerst zu tun, holen Sie sich alles "TasteElemente als Gruppe, indem sie das nennen "GetElementsByName ()" Methode:
Funktion applyStyle ()
const btns = Dokument.GetElementsByName ("Btn");
Btns.foreach (btn =>
Btn.Stil.Hintergrund = "CadetBlue";
);
Wie Sie in der Ausgabe sehen können, während Sie auf die Schaltfläche klicken, wird die Hintergrundfarbe der fünf Schaltflächen geändert:
Methode 2: Element mit dem Namen „querySelectorAll ()“ -Methode mit Namen abrufen
Sie können auch das verwenden “QuerySelectorAll ()Methode zum Erhalten von Elementen durch Verwendung der “Name”Attribut in JavaScript. Diese Methode wird verwendet, um alle Elemente in einem Dokument abzurufen, das einem bestimmten Selektor/Attribut wie CSS -Klasse, ID oder Name entspricht.
Syntax
Die angegebene Syntax wird verwendet, um das Element mit dem Namen mit dem Namen zu erhaltenQuerySelectorAll () ” Methode:
dokumentieren.querySelectorAll ('[name = "n1"]');
Beispiel
Im folgenden Beispiel werden wir nur die Farbe der Schaltflächen ändern, deren Name istbtn1”:
In der definierten Funktion werden wir zuerst auf alle Button -Elemente zugreifen, deren Name istbtn1Und dann das Styling darauf anwenden:
Funktion applyStyle ()
const btns = Dokument.querySelectorAll ('[name = "btn1"]');
Btns.foreach (btn =>
Btn.Stil.Hintergrund = "CadetBlue";
);
Die angegebene Ausgabe bedeutet, dass nur zwei Schaltflächen ihre Hintergrundfarbe geändert haben, deren Name „BTN1“ lautet:
Notiz: Wenn Sie ein einzelnes Element erhalten möchten, wird empfohlen, Dokument zu verwenden.QuerySelector anstelle des Dokuments.QuerySelectorall.
Abschluss
Verwenden Sie die “zum Erhalten oder Abrufen eines Elements nach Namen“ das “GetElementsByName ()" oder der "QuerySelectorAll ()”Methoden. Die am häufigsten und effizient verwendete Methode, um das Element mit Namen zu erhalten. Dieser Beitrag veranschaulicht die Methoden zum Abrufen eines HTML -Elements mit Namen in JavaScript.