Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

Localiser des éléments DOM avec les sélecteurs

L'API des sélecteurs fournit des méthodes qui permettent de retrouver rapidement et facilement des nœuds Element dans le DOM en utilisant un ensemble de sélecteurs. Cela est bien plus rapide que les techniques anciennes, où il fallait, par exemple, utiliser une boucle en JavaScript pour localiser les éléments recherchés.

L'interface NodeSelector

Cette spécification ajoute deux nouvelles méthodes à tout objet implémentant les interfaces Document, DocumentFragment ou Element :

querySelector()

Retourne le premier nœud Element correspondant dans le sous-arbre du nœud. Si aucun nœud correspondant n'est trouvé, null est retourné.

querySelectorAll()

Retourne une NodeList contenant tous les nœuds Element correspondants dans le sous-arbre du nœud, ou une NodeList vide si aucun nœud n'est trouvé.

Note : La NodeList retournée par querySelectorAll() n'est pas vivante, ce qui signifie que les modifications du DOM ne sont pas reflétées dans la collection. Cela diffère d'autres méthodes de requête DOM qui retournent des listes de nœuds vivantes.

Vous trouverez des exemples et des détails dans la documentation des méthodes Element.querySelector() et Element.querySelectorAll().

Sélecteurs

Les méthodes de sélection acceptent des sélecteurs pour déterminer quel ou quels éléments doivent être retournés. Cela inclut les listes de sélecteurs, ce qui permet de regrouper plusieurs sélecteurs dans une seule requête.

Pour protéger la vie privée des utilisateur·ice·s, certaines pseudo-classes ne sont pas prises en charge ou se comportent différemment. Par exemple, :visited ne retournera aucun résultat et :link est traité comme :any-link.

Seuls les éléments peuvent être sélectionnés, donc les pseudo-éléments ne sont pas pris en charge.

Exemples

Pour sélectionner tous les éléments paragraphe (p) d'un document dont la classe inclut warning ou note, vous pouvez faire :

js
const special = document.querySelectorAll("p.warning, p.note");

Vous pouvez aussi interroger par identifiant. Par exemple :

js
const el = document.querySelector("#main, #basic, #exclamation");

Après l'exécution du code ci-dessus, el contient le premier élément du document dont l'identifiant est main, basic ou exclamation.

Voir aussi