Obtenez tous les éléments contenant une classe avec QuerySelector
Il existe de nombreuses situations où les développeurs doivent sélectionner un groupe d'éléments qui partagent des propriétés similaires. Par exemple, en appliquant certaines fonctionnalités collectives sur les éléments spécifiés, les développeurs peuvent avoir besoin de vérifier et d'obtenir les éléments qui contiennent le même nom de classe.
Plus précisément, la récupération des éléments par nom de classe est effectuée en utilisant les méthodes JavaScript, telles que «getElementsByClassName () "," QueySelector () "et" Queryselectorall ()«Méthodes. Le "QuerySelector ()»La méthode ne donne que la première correspondance du sélecteur donné tandis que le «GetElementsByClassName ()» et le «QuerySelectorAll ()» Les méthodes renvoient un tableau d'éléments qui correspondent au nom de classe particulier.
Ce tutoriel décrira la façon de récupérer tous les éléments qui contiennent la même classe à l'aide de Queryselector.
Comment obtenir tous les éléments contenant une classe avec QuerySelector?
Le sélecteur de requête ne donne que la première instance qui correspond au nom de classe. Pour obtenir tous les éléments, utilisez le «queySelectorall ()" méthode. Il renvoie un groupe de tous les éléments qui correspondent au sélecteur spécifié, comme un nom de classe particulier.
Exemple 1: Obtenez tous les éléments contenant une classe avec la méthode QueySelector ()
Créer des boutons et attribuer un «btn«Classe pour les styliser:
Maintenant, obtenez tous les éléments de bouton en utilisant un nom de classe spécifié à l'aide du «QuerySelector ()" méthode:
console.journal (document.Queryselector ('.btn '));La sortie indique que seul le premier élément de bouton a été récupéré à l'aide de la méthode QueySelector ():
Voyons ce qui se passera lorsque nous essaierons de coiffer les boutons en utilisant la méthode QueySelector ().
Tout d'abord, stockez les références de tous les boutons dans la variable "bouton»:
Var Button = Document.Queryselector ('.btn ');Maintenant, appliquez la couleur d'arrière-plan pour tous les boutons en utilisant le «style" propriété:
bouton.style.backgroundColor = "gris";Comme vous pouvez le voir dans la sortie, la couleur est appliquée uniquement sur le premier bouton:
Exemple 2: Obtenez tous les éléments contenant une classe avec QueySelectorall ()
Le "queySelectorall ()»La méthode donne la liste des éléments correspond au sélecteur particulier:
console.journal (document.queySelectorall ('.btn '));Sortir
Obtenez tous les boutons en utilisant le «queySelectorall ()”Méthode en passant le nom de classe pour les styliser:
Var Button = Document.queySelectorall ('.btn ');Pour la liste des éléments de style, utilisez l'approche pour la boucle pour itérer chaque nœud et définissez la couleur d'arrière-plan "gris»:
pour (soit i = 0; i < button.length; i++)bouton [i].style.backgroundColor = "gris";
On peut voir que tous les boutons ont été stylisés avec succès:
Nous avons compilé toutes les informations pertinentes liées à l'obtention d'éléments qui contiennent la même classe avec QueySelector.
Conclusion
Pour obtenir tous les éléments de la même classe, utilisez le «queySelectorall ()"Méthode au lieu de"QuerySelector ()". Car il ne donne que la première instance ou l'élément qui contient le nom de classe particulier. Ce tutoriel a décrit la façon de récupérer tous les éléments HTML qui contiennent le même nom de classe.