JavaScript QuerySelector | Erklärt
Während des Schreibens von HTML- und JavaScript -Codes muss häufig die Funktionen beider Dateien zusammengeführt werden, um die erforderliche Funktionalität auszuführen. In einem solchen Fall das JavaScript “QuerySelector ()Die Methode macht Wunder bei der Verknüpfung des HTML -Elements mit JavaScript mit Hilfe der zugewiesenen ID. Diese Funktionalität kann in Fällen angewendet werden, wenn Sie auf bestimmte HTML -Elemente zugreifen möchten, um einen bestimmten Vorgang mit JavaScript auszuführen.
In diesem Artikel wird Sie über die Arbeit des “führenQuerySelector ()Methode in JavaScript.
Was ist JavaScript QuerySelector () -Methode?
Der "QuerySelector ()Die Methode erhält das erste Element, das einem CSS -Selektor entspricht. Diese Methode kann verwendet werden, um auf ein bestimmtes Element zuzugreifen, ihren Wert auf eine bestimmte Bedingung zu ändern und auf dem DOMM -Modell (DOM) (DOMM) anzuzeigen.
So verwenden Sie die JavaScript -QuerySelector () -Methode?
Befolgen Sie die untergegebene Syntax, um die Methode querySelector () in JavaScript zu verwenden:
dokumentieren.QuerySelector (CSS -Selektoren)
Hier, "CSS -Selektoren”Bezieht sich auf einen oder mehr als einen CSS -Selektoren.
Wir werden nun die Beispiele für die Implementierung der angegebenen Methode durchführen, um ein klares Verständnis zu entwickeln.
Beispiel 1: Anwenden der Methode querySelector (), um zu überprüfen, ob die bestimmte Taste gedrückt wird
Im folgenden Beispiel werden wir zunächst ein Eingabefeld mit dem folgenden Platzhalterwert angeben:
Fügen Sie dann eine Überschrift mit der "hinzu" Status Finden Sie als nächstes das erstellte Eingabefeld und die angegebene Überschrift mit Hilfe des “abQuerySelector ()" Methode: Danach das mit dem Namen namens “anhängen“Taste nach unten" Verwendung der "AddEventListener ()Methode zum Eingangsfeld. Wenden Sie zuletzt die Bedingung zur Überprüfung des spezifischen Schlüssels (Registerkarte) an und geben Sie das entsprechende Ergebnis auf der DOM mit der “zurückInnerText" Eigentum: Dieses Programm holt zunächst das Eingabefeld und die hinzugefügte Etikett mit der Methode querySelector () ab und kann beobachtet werden, dass der InnerText der hinzugefügten Etikett geändert wird, wenn die TAB -Taste gedrückt wird: Beispiel 2: Anwenden der Methode querySelector () zur Berechnung der Abmessungen eines Bildes Im folgenden Beispiel werden wir eine Schaltfläche erstellen und ein Onclick -Ereignis an diese anschließen, das bei Auslöser auf die Funktion iMGSIZE () zugreift: Geben Sie nun den Pfad und die ID des Bildes an: Danach definieren Sie eine Funktion namens “imgsize ()”. Greifen Sie hier auf das Bild zu und holen Sie seine Abmessungen mithilfe der Breite und der Höheneigenschaften und zeigen Sie sie im Alarm -Dialogfeld an: Ausgang Wir haben verschiedene Beispiele zur Implementierung der Methode JavaScript QuerySelector () geliefert. Abschluss Der "QuerySelector ()Die Methode erhält das erste Element, das einem CSS -Selektor entspricht. Es kann verwendet werden, um auf ein Element zuzugreifen, indem seine ID als Argument angeben und dann die erforderliche Funktionalität mithilfe von JavaScript -Code ausführen. Dieses Handbuch erläuterte die Verwendung der Methode QuerySelector () in JavaScript durch die Implementierung verschiedener Fallszenarien. lass input = document.QuerySelector ("Eingabe");
lass result = document.QuerySelector ("H2");Eingang.AddEventListener ("Keydown", (e) =>
if (e.Key === "Registerkarte")
Ergebnis.InnerText = "Tab -Taste gedrückt";
anders
Ergebnis.InnerText = "Tab -Taste nicht gedrückt";
);Funktion imgsize ()
var Dimensions = Dokument.QuerySelector ("#dim");
var width = Dimensionen.Breite;
var Höhe = Abmessungen.Höhe;
alert ("Original width =" + width + "," + "Original Height =" + Höhe);