Guide d'utilisation du sélecteur jQuery querySelector_jquery

Présentation

HTML5 introduit deux nouvelles méthodes, document.querySelector et document.querySelectorAll, dans l'API Web pour sélectionner plus facilement des éléments du DOM. Leurs fonctions sont similaires aux sélecteurs de jQuery. Cela rend l’écriture de code JavaScript natif beaucoup plus facile.
Utilisation

Les deux méthodes utilisent une syntaxe similaire et reçoivent toutes deux un paramètre de chaîne. Ce paramètre doit être une syntaxe de sélection CSS légale.

Copier le code Le code est le suivant :

element = document.querySelector('selectors');
elementList = document.querySelectorAll('selectors');

Le paramètre selectors peut contenir plusieurs sélecteurs CSS, séparés par des virgules.

Copier le code Le code est le suivant :

element = document.querySelector('selector1,selector2,...');
elementList = document.querySelectorAll('selector1,selector2,...');

L'utilisation de ces deux méthodes ne permet pas de trouver des éléments avec un statut de pseudo-classe. Par exemple, querySelector(':hover') n'obtiendra pas les résultats attendus.

querySelector

Copier le code Le code est le suivant :

element = document.querySelector('div#container');//Renvoyer le premier div
avec l'identifiant du conteneur element = document.querySelector('.foo,.bar');//Renvoie le premier élément avec la classe de style foo ou bar

querySelectorAll

Cette méthode renvoie tous les éléments qui remplissent les conditions et le résultat est une collection nodeList. Les règles de recherche sont les mêmes que celles décrites précédemment.

elements = document.querySelectorAll('div.foo');//Renvoyer tous les divs avec le style de classe foo
Il convient de noter que les éléments de la collection nodeList renvoyée ne sont pas en temps réel.