JavaScript est principalement utilisé pour ajouter du contenu interactif et dynamique aux pages HTML statiques, mais pour ajouter un tel contenu, il a besoin d'accès aux éléments HTML qui sont présents dans le DOM (modèle d'objet de document). JavaScript propose plusieurs méthodes différentes pour accéder aux éléments HTML présents dans le document. Ici, nous allons discuter en détail, quel est le QuerySelector () Méthode et comment l'utiliser:

Qu'est-ce que la méthode QueySelector () en javascript

Voulez-vous rechercher et accéder à n'importe quel élément dans le document? Le QuerySelector () est la méthode parfaite que vous avez pour la fonctionnalité proposée.

Le QuerySelector () est une méthode en JavaScript qui joue un rôle majeur dans la recherche d'éléments. Il s'agit d'une méthode de l'API DOM qui nous permet d'obtenir ou de récupérer un seul élément qui correspond au paramètre passé.

Le QuerySelector () Renvoie null si aucune correspondance n'est trouvée; Cependant, s'il y a deux matchs dans le document, il n'accédera que la première occurrence.

Nous allons maintenant discuter de la syntaxe du QuerySelector () méthode avant de passer aux exemples pour mieux comprendre le QuerySelector () méthode.

Syntaxe

élément = document.queySelector (sélecteur (s));

Le QuerySelector () La méthode ne prend qu'un seul paramètre qui spécifie un ou plusieurs sélecteurs; Ces sélecteurs sont utilisés pour sélectionner le premier élément HTML en fonction de son type, de son attribut ou de la valeur de son attribut, etc.

Ici, nous utiliserons différents sélecteurs CSS pour montrer correctement comment le QuerySelector () La méthode fonctionne réellement:

Le sélecteur universel

Le signe astérisque (*) est connu comme le sélecteur universel; Il est utilisé pour accéder à tous les éléments du document:

Bonjour!

Bienvenue à Linux Indice!

Le sélecteur de type / tag

Nous pouvons rechercher n'importe quel élément en passant la valeur de sa balise au QuerySelector () méthode.

Par exemple, si nous voulons obtenir le "

" Tag du HTML DOM et changez sa couleur en rouge, le code ira comme ceci:

Html

Bonjour!

Bienvenue à Linux Indice!

Javascrip

Le sélecteur d'identification

Le # Le signe est utilisé pour sélectionner un élément en fonction de son identifiant; Les ID sont censés être uniques et il n'y a pas deux éléments sur une seule page HTML ne devrait avoir le même ID:

Par exemple, pour modifier la couleur d'un élément HTML dont l'ID est «Exemple-ID», le code ressemblera à ceci:

Html

Bonjour!

Bienvenue à Linux Indice!

Javascrip

Le sélecteur de classe

Le point "." Le signe est le sélecteur de l'attribut de classe qui est utilisé pour sélectionner un élément basé sur sa classe. Plusieurs éléments peuvent avoir la même classe mais le QuerySelector () La méthode ne renvoiera que le premier élément:

Par exemple, pour modifier la couleur d'arrière-plan d'un élément HTML dont la classe est «Exemple-classe», le code ressemblera à ceci:

Html

Bonjour!

Bienvenue à Linux Indice!

Javascrip

Plusieurs sélecteurs

Nous pouvons donner une combinaison de plusieurs sélecteurs le QuerySelector () Méthode également, ces sélecteurs doivent être séparés par des virgules. Cependant, il n'accédera qu'à un seul élément qui se produit en premier dans la séquence de code HTML:

Par exemple, si nous mentionnons deux balises HTML dans la méthode QueySelector ():

Tandis que nos balises HTML sont placées dans la séquence suivante

Bonjour!

Bienvenue à Linux Indice!

Méthode JavaScript QueySelector () - expliquée

Le QuerySelector () la méthode ne renvoie que le premier match qui est

étiqueter:

Pour accéder à plusieurs éléments en JavaScript, la méthode QueySelectorall () est utilisée:

Méthode QueySelectorall () en JavaScript

Supposons que nous voulons changer la couleur de tous les

Tags dont la classe est «vert». Le HTML et le JavaScript iront comme ceci:

Html

Bienvenue à Linux Indice!

Bienvenue à Linux Indice!

Bienvenue à Linux Indice!

Bienvenue à Linux Indice!

Bienvenue à Linux Indice!

Javascrip

Conclusion

Le QuerySelector () La méthode est un moyen efficace d'accéder aux éléments HTML dans DOM. JavaScript fournit également d'autres méthodes pour accéder aux éléments DOM mais QuerySelector () est le plus polyvalent et offre le plus d'options en ce qui concerne la manipulation DOM. D'après l'introduction aux exemples, ce post a expliqué et clarifié presque tous les aspects précisément et soigneusement. Avec l'aide d'exemples, il a clairement décrit le concept du QuerySelector () méthode.