Le querySelector est une méthode JavaScript qui joue un rôle essentiel dans la recherche d'éléments.

Dans cette section, nous comprendrons et discuterons de la méthode querySelector (), de son utilisation et examinerons également un exemple pour comprendre le concept de la méthode querySelector () de manière pratique.

Présentation de la méthode JavaScript querySelector ()

Une méthode d'interface d'élément qui nous permet de rechercher et de renvoyer le premier élément du document. Il trouve l'élément qui correspond à l'un des sélecteurs CSS ou groupe de sélecteurs spécifiés. Cependant, si aucun élément correspondant n’est trouvé, il renvoie null. La méthode querySelector() est la méthode de l'interface Document uniquement. Une interface de document est une interface qui décrit les méthodes courantes ainsi que les propriétés de tout document HTML, XML ou tout autre type de document.

Comment la méthode querySelector () effectue-t-elle la recherche

Nous savons qu'il existe différents types de recherches qui peuvent être utilisées pour rechercher des éléments. Cependant, la méthode querySelector() utilise précommande en profondeur parcours des nœuds du document. Dans celui-ci, le parcours commence par le premier élément du balisage du document, puis traverse les nœuds séquentiels par ordre du nombre de nœuds enfants.

programmation java des nombres premiers

Syntaxe

 element = document.querySelector(selectors); 

La méthode querySelector() est une méthode d'interface de document et a donc une telle syntaxe.

Il possède un paramètre, « sélecteurs », qui est une chaîne DOM et possède un ou plusieurs sélecteurs CSS valides.

Type de retour

Il peut renvoyer « null » si aucune correspondance n'est trouvée, et si le premier élément correspond aux sélecteurs CSS spécifiés (le cas échéant), il renverra cet élément.

Cependant, s'il n'y a pas de sélecteur CSS valide, une exception « SyntaxError » sera levée.

Maintenant, avant d’examiner un exemple d’implémentation, nous devons connaître les différents types de sélecteurs CSS. Si vous ne le savez pas, visitez notre https://www.javatpoint.com/css-selector section du didacticiel CSS.

Nous allons donc maintenant implémenter un exemple dans lequel nous couvrirons un sélecteur CSS et conserverons sa première valeur d'élément en utilisant la méthode querySelector().

Implémentation de querySelector () Exemple

Vous trouverez ci-dessous un exemple de code qui nous fera comprendre le fonctionnement de la méthode querySelector() :

java pendant la condition

 class=&apos;colors&apos;&gt;Colors <p> Myclass</p> <p> It is the div p paragraph</p> <p> div p class</p> <p id="myid"> It is p id</p> It is div id //Element selector var e = document.querySelectorAll (&apos;p&apos;); console.log(e); 

Maintenant, vous pouvez voir la différence entre le code dans lequel dans le premier exemple, nous avons utilisé la méthode querySelector () et qui n'a généré que la première valeur de sélecteur correspondante. Mais, lorsque vous observez le résultat de ce deuxième exemple, vous verrez qu'il a renvoyé toutes les valeurs correspondantes des sélecteurs ou du groupe de sélecteurs spécifiés. Le résultat du code ci-dessus est présenté ci-dessous :

Explication du code

• Le code ci-dessus est une combinaison de HTML et de JavaScript.
• Nous avons implémenté différents sélecteurs CSS dans le code.
• Dans la section JavaScript, nous avons utilisé une méthode querySelectorAll() et invoqué un sélecteur d'éléments CSS.
• Ainsi, la méthode querySelectorAll () se déplace désormais vers le code pour le parcourir à l'aide de la méthode de pré-commande Depth-first et renvoie toutes les valeurs d'élément correspondantes spécifiées en tant que paramètres de la méthode querySlectorAll ().

Ainsi, de la même manière, nous pouvons également utiliser la méthode querySelectorAll () pour les différents autres types de sélecteurs CSS, et elle renverra toutes les valeurs correspondantes des sélecteurs spécifiés comme argument. Afin d'implémenter la méthode, remplacez la méthode querySelector () par la méthode querySelectorAll () pour différents sélecteurs, et la méthode trouvera la correspondance et renverra au moins une valeur correspondante de l'élément spécifié.