Ce didacticiel démontrera les différentes méthodes de sélection des éléments DOM en JavaScript.
Quelles sont les différentes manières de sélectionner des éléments DOM en JavaScript ?
Utilisez les méthodes suivantes pour sélectionner des éléments DOM en JavaScript :
- méthode getElementById()
- Méthode getElementsByClassName()
- méthode getElementsByTagName()
- méthode querySelector()
- méthode querySelectorAll()
Méthode 1 : sélectionnez les éléments DOM à l'aide de la méthode 'getElementById()'
Pour sélectionner des éléments DOM, utilisez le ' getElementById() ” méthode basée sur l'identifiant attribué à l'élément. Cette méthode sélectionne un seul élément par son unique ' identifiant ' attribut. Il donne une référence à l'élément avec l'identifiant spécifié et renvoie ' nul ” si aucun élément correspondant n'est trouvé.
Syntaxe
Utilisez la syntaxe ci-dessous pour la méthode getElementById() :
document. getElementById ( 'idName' )
Ici le ' idName ” est le nom d'un attribut id assigné à un élément.
Exemple
Dans un fichier HTML, créez deux titres dans un élément div en utilisant le ' h4 ' étiqueter. Attribuez des identifiants à l'élément div et aux en-têtes 'h4' des éléments nommés ' div ' et ' titre ', respectivement. Ajoutez l'attribut style à l'élément div pour l'aligner au centre. Attribuez également une classe ' section ” au second titre qui change de couleur :
< div identifiant = 'div' style = 'text-align:center ;' >< h4 identifiant = 'titre' > Accéder aux éléments DOM à l'aide de différentes méthodes < / h4 >
< h4 classe = 'section' identifiant = 'titre' > Sélectionnez les éléments DOM en JavaScript à l'aide de la méthode 'getElementById()'
< / h4 >
< / div >
Maintenant, nous allons obtenir le ' div ' élément en utilisant son identifiant attribué à l'aide de l'élément ' getElementById() ' méthode:
était getById = document. getElementById ( 'div' ) ;Imprimer l'élément contre l'id ' div ' sur la console :
console. enregistrer ( getById ) ;On peut voir que l'élément HTML requis a été récupéré avec succès :
Méthode 2 : sélectionnez les éléments DOM à l'aide de la méthode 'getElementsByClassName()'
Vous pouvez également sélectionner l'élément DOM en utilisant sa classe assignée à l'aide de ' getElementsByClassName() ' méthode. Il sélectionne une liste d'éléments par leur nom de classe. Il génère un objet HTMLCollection en direct, un objet semblable à un tableau qui contient tous les éléments avec le nom de classe spécifié.
Syntaxe
La syntaxe suivante est utilisée pour la méthode « getElementsByClassName() » :
document. getElementsByClassName ( 'nom du cours' )Exemple
Ici, nous allons récupérer l'élément qui contient la classe ' section ” et imprimez sur la console :
était getByClass = document. getElementsByClassName ( 'section' ) ;console. enregistrer ( getByClass ) ;
Comme vous pouvez le voir dans la sortie, un tableau de longueur 1 renvoyé qui contient un élément ' h4 « qui appartient à la classe » section ” :
Méthode 3 : sélectionnez les éléments DOM à l'aide de la méthode 'getElementsByTagName()'
Dans le cas où il n'y a pas d'identifiant ou de classe attribué à un élément, utilisez le ' getElementsByTagName() ” pour obtenir l'élément par son nom de balise. Il renvoie également un objet HTMLCollection en direct, qui est un objet semblable à un tableau qui contient tous les éléments qui ont le nom de balise spécifié.
Syntaxe
Suivez la syntaxe donnée pour sélectionner des éléments en fonction du nom de la balise :
getElementsByTagName ( tagName )Exemple
Appelez la méthode 'getElementsByTagName()' en passant le nom de la balise ' h4 ”. Ensuite, imprimez la liste des éléments correspondant au nom de balise spécifié sur la console :
était getByTag = document. getElementsByTagName ( 'h4' ) ;console. enregistrer ( getByTag ) ;
Sortir
Méthode 4 : Sélectionnez les éléments DOM à l'aide de la méthode « querySelector() »
Utilisez le ' querySelector() ” méthode pour obtenir l'élément DOM. Il sélectionne un seul élément qui correspond à un sélecteur CSS spécifié. Elle renvoie le premier élément correspondant trouvé dans le document. Si aucun élément ne correspond, cela donne ' nul ”.
Syntaxe
La syntaxe mentionnée ci-dessous est utilisée pour la méthode « querySelector() » :
document. querySelector ( attribut )Ici, l'attribut est un sélecteur CSS, tel qu'un identifiant ou une classe comme ' #ma pièce d'identité ” “ .Ma classe “.
Exemple
Appelez la méthode 'querySelector()' et passez l'id ' #titre ” pour obtenir les éléments qui contiennent le même identifiant :
était getByquery = document. querySelector ( '#titre' ) ;console. enregistrer ( getByquery ) ;
Il donne le premier élément correspondant en sortie :
Méthode 5 : Sélectionnez les éléments DOM à l'aide de la méthode « querySelectorAll() »
Si vous voulez sélectionner tous les éléments qui contiennent l'attribut spécifié (id ou class), utilisez le ' querySelectorAll() ' méthode. Il sélectionne une liste d'éléments qui correspondent à un sélecteur CSS défini particulier. Il donne un objet NodeList qui contient tous les éléments du document qui correspondent au sélecteur CSS particulier.
Syntaxe
Utilisez la syntaxe suivante pour obtenir la liste des éléments :
document. querySelectorAll ( attribut )Exemple
Pour obtenir la liste de l'élément correspondant qui contient l'id ' titre ' avec le ' querySelectorAll() ” méthode et impression sur les éléments de la console :
était getByqueryAll = document. querySelectorAll ( '#titre' ) ;console. enregistrer ( getByqueryAll ) ;
Sortir
Il s'agit de sélectionner des éléments DOM en JavaScript.
Conclusion
Pour sélectionner les éléments DOM en JavaScript, utilisez le ' getElementById() ”, “ getElementsByClassName() ”, “ getElementsByTagName() ”, “ querySelector() ', ou la ' querySelectorAll() ' méthode. Ces méthodes offrent différentes manières de sélectionner des éléments du DOM en fonction de leurs identifiants uniques, noms de classe, noms de balises ou sélecteurs CSS. Ce didacticiel a démontré les différentes méthodes de sélection des éléments DOM en JavaScript.