So erhalten Sie Element nach Typ in JavaScript

Es gibt verschiedene Möglichkeiten, ein Element in JavaScript zu erhalten oder zu holen, einschließlich GetelementById () und GetElementByClass (). Haben Sie jedoch jemals darüber nachgedacht, die Art von Element zu bekommen? Wenn ja, dann teilen Sie uns Ihnen mit, dass JavaScript den QuerySelectorAll () oder GetElementsByTagName () -Methoden anbietet, die für den angegebenen Zweck verwendet werden können.

In diesem Artikel werden die Methoden zum Erhalten von Elementen nach Typ in JavaScript erläutert.

So erhalten Sie Element nach Typ in JavaScript?

Verwenden Sie die folgenden Methoden, um Elemente nach Typ zu erhalten:

• QuerySelectorAll () -Methode
• GetElementsByTagName () -Methode

Schauen wir uns jede der genannten Methoden nacheinander an!

Methode 1: Element nach Typ mit querySelectorAll () Methode abrufen

“QuerySelectorAll ()Ist eine vordefinierte JavaScript -Dokumentmethode, die die Elementobjekte zurückgibt, die mit den angegebenen Selektoren übereinstimmen. Die QuerySelectorAll () und QuerySelector () -Methoden funktionieren gleich.

Syntax
Befolgen Sie die angegebene Syntax für das Erhalten von Element nach Typ mit der Methode querySelectorAll ():

dokumentieren.QuerySelectorAll (Selektoren);

Hier das "Wähler"Ist der Typ, dessen Elemente Sie zum Beispiel bekommen möchten"Eingang" oder "Eingabe [Typ = Text]”. Es wird alle Elemente herausfinden, die mit dem angegebenen Selektor übereinstimmen und zum DOM zurückkehren. Sie können mehrere von Kommas getrennte Selektoren übergeben.

Beispiel 1: Holen Sie sich ein Element nach Typ
Im folgenden Beispiel werden wir ein Eingabefeld erstellen. “Text”Mit ID“Name"Und Wert"JohnUnd eine Überschrift:

Element nach Typ = input [type = text] abrufen

Erstellen Sie außerdem drei Eingangstypen “RadioDurch Zuweisen von IDs und Werten:

Html

CSS

JavaScript

Erstellen Sie dann eine Schaltfläche, indem Sie anfügen “ONCLICK"Ereignis, mit dem die benutzerdefinierte Methode mit dem Namen" ausgelöst wird "ElementGetByType ()”:

Klicken

Rufen Sie in einer JavaScript -Datei zunächst die “auf"QuerySelectorAll ()"Methode durch Übergabe eines Selektors"Eingabe [Typ = Text]Das wird alle Elemente dieses Typs zurückgeben. Dann definieren Sie eine "ElementGetByType ()Methode wob

var elementtypeSelector = Dokument.querySelectorAll ('Eingabe [type = text]');
Funktion elementGetByType ()
ALERT ("Der Text für Eingangstyp des HTML -Elements enthält" + elementtypeSelector [0].Wert);

Die Ausgabe wird angezeigt "JohnIn der Warnmeldung, die der Wert des Textfelds Eingabetyp ist:

Beispiel 2: Holen Sie sich alle Elemente nach Typ
Holen Sie sich nun alle Elemente des Eingangstyps, indem Sie übergeben “Eingang"Als Argument im" "QuerySelectorAll ()" Methode:

var elementtypeSelector = Dokument.QuerySelectorAll ('Eingabe');

Drucken Sie die Werte der “Eingang"Selektor einschließlich"Text" Und "Radio”Auf Konsole:

Konsole.log (elementtypeSelector [0].Wert, ElementtypeSelector [1].Wert, ElementtypeSelector [2].Wert, ElementtypeSelector [3].Wert);

Ausgang

Methode 2: Element nach Typ mit GetElementsByTagName () -Methode abrufen

Es gibt eine andere vordefinierte JavaScript -Methode namens “GetElementsByTagName ()Das gibt die Elementobjekte zurück, deren Tag -Name dem angegebenen Namen übereinstimmt.

Syntax
Verwenden Sie die folgende Syntax, um die Methode GetElementByTagName () zu verwenden:

dokumentieren.GetElementsByTagName (Name);

Hier, "NameIst der Tagname eines HTML -Attributs.

Beispiel
In diesem Beispiel erhalten wir den Wert des Elements nach Typ mit der “GetElementsByTagName ()"Methode, wo wir den Tag -Namen übergeben"Eingang”Um die Werte des Elements mit dem angegebenen Tag -Namen zu übereinstimmen und in einer Variablen zu speichernElementtypeSelector”. Dann definieren Sie eine "ElementGetByType ()”Funktion, in der die für die Schleife bis zur Länge des Selektors iteriert und den Typ des Selektors überprüft; Wenn es gleich „Radio“ ist, rufen Sie die Amerert () -Methode auf, um die Werte des Radioelements zu drucken:

var elementtypeSelector = Dokument.GetElementsByTagName ('Eingabe');
Funktion elementGetByType ()
für (lass i = 0; i < elementTypeSelector.length; i++)
if (elementtypeSelector [i].Typ == 'Radio')
alert ("Das HTML -Element -Eingangstyp enthält" + elementtypeSelector [i].Wert);

Die Ausgabe zeigt alle Werte des Eingangstyp -Radios:

Wir haben alle Lösungen für die Erzielung von Elementen nach Typ in JavaScript zur Verfügung gestellt.

Abschluss

Um die Elemente nach Typ zu erhalten, verwenden Sie die vordefinierten JavaScript -Methoden, einschließlich der Methode querySelectorAll () oder die Methode GetElementsByTagName (). Der einzige Unterschied zwischen beiden besteht darin, dass die GetElementsByTagName () nur abgerufene Elemente abgerufen werden. In dieser Beschreibung haben wir die verschiedenen Ansätze zum Erhalten von Elementen nach Typ in JavaScript erklärt.