En JavaScript, le ' querySelectorAll() ” récupère le tout premier élément qui correspond exactement aux sélecteurs CSS spécifiés. Cette méthode commence à parcourir l'arborescence DOM pour effectuer cette tâche. Une fois l'élément trouvé, il applique les propriétés ou méthodes intégrées JavaScript définies dans la section script pour effectuer des tâches spéciales. Cette méthode est généralement utilisée pour sélectionner les éléments ciblés selon les besoins. Il permet aux utilisateurs de sélectionner tous les éléments qui correspondent au sélecteur spécifié ou à celui particulier placé à l'index donné.
Ce guide illustre l'utilisation de la méthode « querySelectorAll() » en JavaScript.
Comment utiliser la méthode 'querySelectorAll()' en JavaScript ?
Pour utiliser le ' querySelectorAll() ”, spécifiez le sélecteur CSS comme argument. Les sélecteurs CSS incluent 'Type, Classe et id'. Si le sélecteur CSS n'est pas valide, il renvoie une erreur de syntaxe, sinon, il renvoie un objet NodeList statique comme sortie standard.
Syntaxe
document.querySelectorAll ( Sélecteurs CSS )
Dans la syntaxe ci-dessus, le ' Sélecteurs CSS ” font référence à tous les sélecteurs CSS valides.
Utilisons pratiquement la syntaxe définie ci-dessus.
Code HTML
Vue d'ensemble du code HTML donné :
< h2 classe = 'démo' > Premier titre h2 >< h3 classe = 'démo' > Deuxième rubrique h3 >
< p classe = 'démo' > Premier paragraphe p >
< p classe = 'démo' > La deuxième paragraphe p >
< bouton sur clic = 'jsFunc()' > Cliquez ici ! bouton >
Dans les lignes de code ci-dessus :
- Le ' ” ajoute un sous-titre ayant la classe “demo”.
- Le ' ” définit un deuxième sous-titre avec la même classe nommé “demo”.
- Le ' Les balises ' intègrent les déclarations de paragraphe ayant la même classe, c'est-à-dire 'démo'.
- Le '
» comprend un nouveau bouton avec un événement de souris « onclick » pour exécuter la fonction « jsFunc() ».
Note: Le code HTML particulier est suivi tout au long de ce guide.
Exemple 1 : Application de la méthode « querySelectorAll() » pour sélectionner des éléments ayant la même classe et modifier leurs couleurs
Cet exemple utilise la méthode 'querySelectorAll()' pour sélectionner tous les éléments qui utilisent la classe 'demo'.
Code Javascript
Passons en revue le code ci-dessous :
< scénario >fonction jsFunc ( ) {
liste constante = document.querySelectorAll ( '.démo' ) ;
pour ( laisser je = 0 ; je < liste.longueur ; je++ ) {
liste [ je ] .style.color = 'rouge-orange' ;
}
}
scénario >
Dans les lignes de code ci-dessus :
- Le ' jsFunc() ” la fonction est définie.
- Dans sa définition, la variable 'liste' utilise le ' querySelectorAll() » pour sélectionner tous les éléments ayant la classe « démo ».
- Ensuite, le « pour ' la boucle initialise une liste de nœuds pour parcourir tous les éléments HTML trouvés ayant la classe ' démo ' et changez la couleur de leur texte à l'aide de la touche ' style.couleur ' propriété.
Sortir
Dans la sortie ci-dessus, on peut voir que la couleur du texte des éléments comprenant le même nom de classe, c'est-à-dire 'démo', est modifiée lors du clic sur le bouton.
Exemple 2 : application de la méthode « querySelectorAll() » pour sélectionner les éléments indexés spécifiques
Outre tous les éléments, l'utilisateur peut également sélectionner l'élément indexé spécifique ayant la classe 'démo'.
Code Javascript
Considérez le code JavaScript donné :
< scénario >fonction jsFunc ( ) {
liste constante = document.querySelectorAll ( 'h2.demo' ) ;
liste [ 0 ] .style.color = 'vert' ;
}
scénario >
Dans l'extrait de code ci-dessus :
- La variable « list » sélectionne l'élément « h2 » dont la classe est « demo » à l'aide du « querySelectorAll() ' méthode.
- Après cela, la variable 'list' spécifie l'index de l'élément 'h2' pour changer la couleur du texte de l'élément 'H2' placé à l'index '0'.
Sortir
La sortie montre que la couleur du texte de l'élément 'H2' placé à l'index zéro a la classe 'démo' modifiée lors du clic sur le bouton.
Exemple 3 : Application de la méthode 'querySelectorAll()' pour obtenir le nombre d'éléments ayant la même classe
Cet exemple récupère le nombre d'éléments ayant la même classe en utilisant la méthode 'querySelectorAll()'.
Code HTML
Tout d'abord, regardez le code HTML modifié de 'l'exemple 1':
< p identifiant = 'pour' > p >
Dans le code HTML indiqué ci-dessus, ajoutez un paragraphe vide avec un identifiant 'para' à la fin du code HTML 'Exemple 1'.
Code Javascript
Maintenant, continuez avec le code JavaScript :
< scénario >fonction jsFunc ( ) {
const nodelist = document.querySelectorAll ( 'h3' ) ;
document.getElementById ( 'pour' ) .innerHTML = nodelist.length;
}
scénario >
Selon l'extrait de code ci-dessus :
- La fonction « jsFunc() » sélectionne d'abord tous les éléments «
» à l'aide de la fonction « querySelectorAll() ' méthode.
- Après cela, le « getElementById() ” accède au paragraphe vide ajouté via son identifiant “para” pour l'ajouter avec la valeur renvoyée de la propriété “length” appliquée.
Sortir
Comme on le voit, la sortie ci-dessus montre un total de '4' éléments qui correspondent au sélecteur de classe CSS spécifié 'demo'.
Conclusion
Le ' querySelectorAll() ” peut être utilisée facilement en spécifiant le sélecteur CSS comme valeur. Cette méthode correspond à chaque élément HTML et sélectionne ceux qui correspondent au sélecteur spécifié. Une fois les éléments sélectionnés, il exécute sur eux la tâche requise définie dans la section script. Ce guide a brièvement illustré l'utilisation de la méthode « querySelectorAll() » en JavaScript.