In verschiedenen Situationen müssen Programmierer das HTML-Element über das name-Attribut abrufen. Angenommen, der Entwickler möchte auf ein Formularsteuerelement wie ein Optionsfeld oder ein Kontrollkästchen zugreifen, um seinen Wert zu lesen oder zu manipulieren. Genauer gesagt die „ Name ”-Attribut wird verwendet, um verwandte Formularsteuerelemente zu gruppieren, und derselbe Name kann für viele Steuerelemente bereitgestellt werden, sodass auf sie als eine einzelne Gruppe zugegriffen werden kann.
Dieser Beitrag veranschaulicht die Methoden zum Abrufen eines HTML-Elements nach Namen in JavaScript.
Wie bekomme ich Elemente nach Namen in JavaScript?
In JavaScript können Sie mithilfe der folgenden vordefinierten JavaScript-Methoden auf ein HTML-Element über sein Namensattribut zugreifen:
-
- getElementsByName()-Methode
- querySelectorAll() Methode
Methode 1: Element nach Namen abrufen mit der Methode „getElementsByName()“.
Um das HTML-Element nach Namen abzurufen, verwenden Sie das „ getElementsByName() ' Methode. Diese Methode gibt eine Sammlung von Elementen zurück, die das angegebene Namensattribut haben.
Syntax
Für die Methode getElementsByName() wird folgende Syntax verwendet:
document.getElementsByName ( 'Name' )
Beispiel
Erstellen Sie zunächst sechs Schaltflächen. Fünf von ihnen haben ein „ Name ” Attribut, das verwendet wird, um das HTML-Element zu erhalten “ Taste “. Hängen Sie das onclick-Ereignis mit der sechsten Schaltfläche an, die das „ applyStyle() ”-Funktion, um die fünf Tasten zu gestalten:
< Taste Name = 'btn' > Taste Taste >< Taste Name = 'btn' > Taste Taste >
< Taste Name = 'btn' > Taste Taste >
< Taste Name = 'btn' > Taste Taste >
< Taste Name = 'btn' > Taste Taste > < Br >< Br >
< Schaltfläche onclick = 'applyStyle()' > Klicken Sie hier Taste >
Definiere eine Funktion “ applyStyle() “, das beim Klicken auf die Schaltfläche ausgelöst wird und die Hintergrundfarbe aller Schaltflächen ändert. Holen Sie sich dazu zunächst alle „ Taste ” Elemente als Gruppe durch Aufrufen der „ getElementsByName() ' Methode:
const btns = document.getElementsByName ( 'btn' ) ;
btns.forEach ( btn = > {
btn.style.background = 'Kadettenblau' ;
} ) ;
}
Wie Sie in der Ausgabe sehen können, wird beim Klicken auf die Schaltfläche die Hintergrundfarbe der fünf Schaltflächen geändert:
Methode 2: Element nach Name mit der Methode „querySelectorAll()“ abrufen
Sie können auch die „ querySelectorAll() ”-Methode zum Abrufen von Elementen mithilfe der „ Name ”-Attribut in JavaScript. Diese Methode wird verwendet, um alle Elemente in einem Dokument abzurufen, die mit einem angegebenen Selektor/Attribut wie CSS-Klasse, ID oder Name übereinstimmen.
Syntax
Die angegebene Syntax wird verwendet, um das Element anhand des Namens mit dem „ querySelectorAll()” Methode:
document.querySelectorAll ( '[]' ) ;
Beispiel
Im folgenden Beispiel ändern wir nur die Farbe der Schaltflächen, deren Name „ btn1 “:
< div >< Schaltflächenname = 'btn' > Taste Taste >
< Schaltflächenname = 'btn1' > Taste Taste >
< Schaltflächenname = 'btn' > Taste Taste >
< Schaltflächenname = 'btn1' > Taste Taste >
< Schaltflächenname = 'btn' > Taste Taste > < Br >< Br >
< Schaltfläche onclick = 'applyStyle()' > Klicken Sie hier Taste >
div >
In der definierten Funktion rufen wir zuerst den Zugriff auf alle Schaltflächenelemente auf, deren Name „ btn1 “ und wenden Sie dann Styling darauf an:
const btns = document.querySelectorAll ( '[]' ) ;
btns.forEach ( btn = > {
btn.style.background = 'Kadettenblau' ;
} ) ;
}
Die angegebene Ausgabe bedeutet, dass nur zwei Schaltflächen ihre Hintergrundfarbe geändert haben, deren Name „btn1“ ist:
Notiz: Wenn Sie ein einzelnes Element erhalten möchten, wird empfohlen, document.querySelector anstelle von document.querySelectorAll zu verwenden.
Abschluss
Um ein Element nach Namen zu erhalten oder abzurufen, verwenden Sie das „ getElementsByName() ' oder der ' querySelectorAll() “Methoden. Die am häufigsten und effizientesten verwendete Methode, um das Element nach Namen zu erhalten, ist die Methode „getElementsByName()“. Dieser Beitrag veranschaulicht die Methoden zum Abrufen eines HTML-Elements nach Namen in JavaScript.