Sélection et parcours de l'arbre DOM
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
Elementcorrespondant dans le sous-arbre du nœud. Si aucun nœud correspondant n'est trouvé,nullest retourné. querySelectorAll()-
Retourne une
NodeListcontenant tous les nœudsElementcorrespondants dans le sous-arbre du nœud, ou uneNodeListvide 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 :
const special = document.querySelectorAll("p.warning, p.note");
Vous pouvez aussi interroger par identifiant. Par exemple :
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.