So erhalten Sie Element nach Attribut in JavaScript

Während der Entwicklung von Websites gibt es einige Situationen, in denen Programmierer/Entwickler die Elemente im JavaScript mithilfe ihrer zugewiesenen Attribute wie "wie" wie "Ausweis","Klasse", usw. Verwenden Sie dazu den JavaScript “QuerySelector ()" Methode.

In diesem Tutorial wird der Prozess erläutert, um das HTML -Element per Attribut mit JavaScript zu erhalten.

So erhalten Sie Element nach Attribut in JavaScript?

Um ein Element nach Attribut zu erhalten, das “QuerySelector ()”Methode wird verwendet. Es gibt das erste Element des Dokuments zurück, das dem jeweiligen Attribut entspricht. Diese Methode wählt ein bestimmtes Tag mit einem bestimmten Attributwert aus. Die Parameter, die übergeben werden müssen, sind die “Tagid","Klasse", usw.

Syntax
Verwenden Sie die unten erwähnte Syntax, um das Element nach Attribut zu erhalten:

dokumentieren.querySelector ("[MyAttribute = value]");

Übergeben Sie in der obigen Syntax das Attribut mit seinem zugewiesenen Wert als Parameter.

Beispiel
Erstellen Sie in der HTML -Datei zunächst eine “div”Element mit dem Tag und zuweisen und eine ID zuweisen“Divid”Dazu. Erstellen Sie eine Schaltfläche im Div -Element und fügen Sie eine an "anONCLICKEreignis, das die "auslösen"GetElement ()Methode zum Erhalten des Elements:

Klicken Sie hier, um Element zu erhalten


Klicken

Zum Styling der DIV verwenden wir die folgenden Codezeilen:

#divid
Polsterung: 10px;
Höhe: 100px;
Breite: 200px;
Rand: Auto;
Hintergrundfarbe: Pink;

Die entsprechende Ausgabe ist wie folgt:

Definieren Sie in der JavaScript -Datei eine Funktion “GetElement ()Das wird ausgelöst, während die Schaltfläche klickt. Ruf den "QuerySelector ()Methode und übergeben das Attribut "Ausweis"Und sein Wert"Divid"Als Argument und speichern Sie das resultierende Element in einer Variablen"Element”:

Funktion getElement ()
var element = document.querySelector ('[id = "divid"]');
Alarm (Element);

Die angegebene Ausgabe zeigt, dass das Attribut “Divid"Gehört zu einem Element"div”:

Wenn Sie alle Elemente innerhalb des jeweiligen Elements sehen möchten, anstatt die alert () -Methode aufzurufen, verwenden Sie die “Konsole.Protokoll()Methode, die das Element einschließlich seiner untergeordneten Elemente zeigt.

Funktion getElement ()
var element = document.querySelector ('[id = "divid"]');
Konsole.log (Element);

Ausgang

Das obige GIF zeigt die HTML “div"Element, das ein Attribut mit dem Wert hat"Divid”, Mit seinen untergeordneten Elementen in der Konsole, indem Sie auf die Schaltfläche klicken.

Abschluss

Verwenden Sie das JavaScript -vordefinierte JavaScript, um ein Element nach Attribut zu erhaltenQuerySelector ()" Methode. Es wird verwendet, um ein bestimmtes Tag mit einem bestimmten Attributwert auszuwählen. In diesem Tutorial wird der Vorgang erläutert, um das HTML -Element mit JavaScript nach Attribut zu erhalten.