JavaScript QuerySelector | Expliqué
Lors de la rédaction de codes HTML et JavaScript, il est souvent nécessaire de fusionner les fonctionnalités des deux fichiers afin d'effectuer la fonctionnalité requise. Dans un tel cas, le javascript «QuerySelector ()»La méthode fait des merveilles en liant l'élément HTML avec JavaScript à l'aide de l'ID attribué. Cette fonctionnalité peut être appliquée dans les cas où vous souhaitez accéder à des éléments HTML spécifiques pour effectuer une opération spécifique sur eux en utilisant JavaScript.
Cet article vous guidera sur le fonctionnement du «QuerySelector ()»Méthode en JavaScript.
Qu'est-ce que la méthode JavaScript QuerySelector ()?
Le "QuerySelector ()”La méthode obtient le premier élément qui correspond à un sélecteur CSS. Cette méthode peut être utilisée pour accéder à un élément particulier, modifier sa valeur sur une condition particulière et l'afficher sur le modèle d'objet document (DOM).
Comment utiliser la méthode JavaScript QuerySelector ()?
Suivez la syntaxe divisée ci-dessous pour utiliser la méthode QuerySelector () en JavaScript:
document.QueySelector (sélecteurs CSS)
Ici, "Sélecteurs CSS»Fait référence à un ou plusieurs sélecteurs CSS.
Nous allons maintenant passer par les exemples de mise en œuvre de la méthode indiquée pour développer une compréhension claire.
Exemple 1: Application de la méthode QueySelector () pour vérifier si la touche particulière est enfoncée
Dans l'exemple suivant, nous inclurons d'abord un champ de saisie avec la valeur d'espace réservée suivante:
Ensuite, ajoutez une rubrique en utilisant le " Statut Ensuite, récupérez le champ de saisie créé et la rubrique spécifiée à l'aide du «QuerySelector ()" méthode: Après cela, joignez l'événement nommé «touche Bas" en utilisant le "addEventListener ()»Méthode au champ de saisie. Enfin, appliquez la condition pour vérifier la clé spécifique (onglet) et renvoyer le résultat correspondant sur le DOM à l'aide du «texte de texte" propriété: Ce programme rapportera d'abord le champ de saisie et l'étiquette ajoutée à l'aide de la méthode QuerySelector () et on peut observer que lorsque la touche de tabulation est enfoncée, le texte interne de l'étiquette ajoutée est modifié: Exemple 2: Application de la méthode QueySelector () pour calculer les dimensions d'une image Dans l'exemple suivant, nous créerons un bouton et y joindrons un événement OnClick qui accédera à la fonction IMGSIZE () lorsqu'il est déclenché: Maintenant, spécifiez respectivement le chemin et l'ID de l'image: Après cela, définissez une fonction nommée «imgsize ()". Ici, accédez à l'image et récupérez ses dimensions en utilisant les propriétés de largeur et de hauteur, respectivement et affichez-les sur la boîte de dialogue d'alerte: Sortir Nous avons fourni divers exemples pour implémenter la méthode JavaScript QueySelector (). Conclusion Le "QuerySelector ()”La méthode obtient le premier élément qui correspond à un sélecteur CSS. Il peut être utilisé pour accéder à un élément en spécifiant son identifiant comme argument, puis en effectuant les fonctionnalités requises sur celui-ci en utilisant le code JavaScript. Ce manuel a expliqué l'utilisation de la méthode QueySelector () en JavaScript en implémentant différents scénarios de cas. Soit l'entrée = document.queySelector ("entrée");
Let résultat = documenter.queySelector ("H2");saisir.addEventListener ("keydown", (e) =>
si (e.key === "tab")
résultat.InnerText = "Tab Key Appuyed";
autre
résultat.InnerText = "Tab Key non appuyé";
);fonction imgsize ()
Var Dimensions = Document.queySelector ("# dim");
Var Largeur = Dimensions.largeur;
var hauteur = dimensions.hauteur;
alert ("oriental width =" + width + "," + "original height =" + height);