Comment trouver des éléments HTML par des sélecteurs CSS
Cet article discutera des procédures pour trouver les éléments HTML par les sélecteurs CSS. De plus, nous expliquerons également l'utilisation des méthodes QuerySelector () et QuerySelectorall () pour découvrir les éléments des sélecteurs CSS, avec l'aide d'exemples. Alors, commençons!
Méthode QueySelector () pour trouver des éléments par des sélecteurs CSS
L'interface d'élément a un «QuerySelector ()«Méthode, qui peut être utilisée pour trouver des éléments par des sélecteurs CSS. La méthode QueySelector () renvoie un «nul”Valeur si aucun élément correspondant n'est trouvé. Cette méthode utilise le «Précommande en profondeur”Méthode de traversée pour traverser les nœuds du document.
Syntaxe
élément = document.queySelector (sélecteurs);La méthode queySelector () prend «sélecteurs«Comme argument qui est une chaîne DOM comprenant un ou plusieurs sélecteurs CSS valides.
Comment utiliser la méthode QueySelector () pour trouver des éléments par des sélecteurs CSS
Maintenant, nous allons montrer la procédure pour trouver nos éléments par des sélecteurs CSS à l'aide de la méthode QuerySelector ().
Exemple 1: Utilisation de la méthode QueySelector () pour trouver des éléments par des sélecteurs CSS
Dans le premier exemple, la méthode queySelector () découvrira le premier
élément dans la classe = "Didacticiel"Et définit sa couleur d'arrière-plan sur"jaune»:
!Doctype html>Trouver des éléments HTML par le sélecteur CSS
La méthode QueySelector ()
C'est Linuxhint.com = "tutoriel"
La tête principale
Premier paragraphe.
Exécuter le programme-donné ci-dessus dans n'importe quel éditeur de code ou bac à sable codant en ligne, cependant, nous utiliserons le JSBIN à cet effet:
Comme vous pouvez le voir le fond du premier ""L'élément est changé en"jaune»:
Exemple 2: Utilisation de la méthode QueySelector () pour trouver des éléments par des sélecteurs CSS
Le programme donné ci-dessous modifiera l'élément texte avec id = "goûter»:
Trouver des éléments par des sélecteurs CSS
La méthode QueySelector ()
Nous changerons l'élément de texte avec:
Ceci est un élément p ayant le.
L'exécution du code donné ci-dessus vous montrera la sortie suivante:
Exemple 3: Utilisation de la méthode QueySelector () pour trouver des éléments par des sélecteurs CSS
Dans le troisième exemple, nous utiliserons le «QuerySelector ()«Méthode pour trouver le premier
élément avec le parent, puis modifiez sa couleur d'arrière-plan en «jaune»:
Premier élément
Je suis le premier élément p et l'élément div est mon parent
Deuxième élément
Je suis le deuxième élément p et l'élément div est mon parent.
Cliquez sur le bouton ci-dessous pour modifier la couleur d'arrière-plan du premier élément p
Clique sur le "Changer de couleur”Bouton pour modifier la couleur d'arrière-plan du premier
élément:
queySelectorall () pour trouver des éléments par des sélecteurs CSS
Dans HTML, la méthode QueySelectorall () renvoie un objet NodeList statique qui comprend une collection d'éléments enfants d'un élément correspondant aux sélecteurs CSS spécifiés. Les numéros d'index sont utilisés pour découvrir les nœuds, à partir de 0.
Syntaxe
élément.QuerySelectorall (sélecteurs)La méthode QuerySelectorall () prend «sélecteurs«Comme argument, qui est une chaîne DOM qui comprend un ou plusieurs sélecteurs CSS valides.
Exemple 1: Utilisation de la méthode QueySelectorall () pour trouver des éléments par des sélecteurs CSS
Dans le premier exemple, nous utiliserons la méthode QuerySelectorall () pour trouver tout
éléments du document. Après cela, cela définira le «Couleur de l'arrière plan«Du premier
élément de "rose»:
Tête principale avec
Premier paragraphe avec.
Deuxième paragraphe avec.
Changer la couleur d'arrière-plan du premier élément p avec
Remarque: nous apprenons à trouver des éléments par des sélecteurs CSS
Comme vous pouvez le voir, l'arrière-plan du premier
L'élément est changé en «rose»:
Exemple 2: Utilisation de la méthode QueySelectorall () pour trouver des éléments par des sélecteurs CSS
Maintenant, nous allons écrire un programme JavaScript pour découvrir le nombre total d'éléments avec le «Didacticiel"Classe en utilisant le"longueur”Propriété de l'objet Nodelist:
Le premier élément div avec
Deuxième élément div avec
Un élément P avec
Cliquez sur le bouton suivant pour savoir comment le nombre d'éléments avec le "tutoriel" de classe "
Maintenant, la sortie vous montrera un "Cliquez sur moi" bouton; Cliquez dessus pour vérifier le nombre d'éléments avec la classe = "Didacticiel»:
Exemple 3: Utilisation de la méthode QueySelectorall () pour trouver des éléments par des sélecteurs CSS
Dans l'exemple suivant, nous utiliserons la méthode QuerySelectorall () pour trouver «h2","div", et "portée" éléments. Après avoir trouvé les éléments spécifiés, nous changerons leur couleur d'arrière-plan en «rouge»:
L'élément principal
Le deuxième élément H2
Un élément div
Un élément P.
Un élément p ayant = "couleur: bleu;"> Span élément
Cliquez sur le bouton suivant pour définir la couleur d'arrière-plan de tous les éléments H2, Div et Span.