Il existe deux méthodes populaires et couramment utilisées pour obtenir des éléments par nom de classe en JavaScript. Je vais partager les exemples avec vous.
Cas:
Supposons que vous ayez dix liens principaux dans tout votre document HTML avec le nom de classe link-primary et que vous souhaitiez modifier le comportement de tous les liens principaux. Ainsi, lorsque quelqu’un clique sur ces liens spécifiques, cela doit rediriger l’utilisateur vers une URL spécifique.
Vous pouvez sélectionner tous les liens principaux à l'aide de getElementsByClassName ou querySelectorAll.
getElementsByClassName
Vous trouverez ci-dessous quelques notes rapides pour getElementsByClassName :
- Il renvoie la HTMLCollection en direct des éléments du document
- Vous pouvez accéder aux éléments à l'aide d'un index et vérifier le nombre d'éléments qu'il contient avec la méthode length.
- Vous ne pouvez pas utiliser directement une méthode de tableau tant que vous ne l'avez pas convertie en un tableau réel.
querySelectorAll
Vous trouverez ci-dessous quelques notes rapides pour querySelectorAll :
- Il renvoie la NodeList des nœuds du document
- Vous pouvez utiliser certaines méthodes de tableau, mais vous devez toujours le convertir en un tableau réel afin de pouvoir accéder à toutes les méthodes.
- Pour sélectionner la classe, vous devez utiliser un point ou un point avant le nom de la classe.
Convertir HTMLCollection ou NodeList en un tableau
La méthode de tableau la plus utile pour convertir DOM HTMLCollection ou NodeList en tableau est Array.from()
Transmettez simplement la collection de type tableau ou la liste de nœuds via cette méthode, et elle renverra un nouveau tableau avec la capacité d'utiliser des méthodes de tableau.
C'est ça! Donc, en un mot, vous avez appris :
- Deux méthodes pour obtenir des éléments DOM par noms de classe
- Conversion de HTMLCollection et NodeList en un tableau
- Différence entre querySelectorAll et getElementsByClassName
Vous pouvez en savoir plus sur les sélecteurs CSS en utilisant cette aide-mémoire pour les sélecteurs CSS .
