Ce didacticiel décrit la procédure de recherche de l'élément DOM en fonction de n'importe quelle valeur d'attribut.
Comment rechercher/récupérer un élément dans DOM en fonction d'une valeur d'attribut ?
Pour trouver l'élément dans DOM en fonction d'une valeur d'attribut, utilisez le ' querySelector() ' méthode. Il donne le premier élément trouvé dans le document qui correspond à la valeur de sélecteur CSS donnée.
Note : Pour obtenir tous les éléments qui correspondent à la valeur de sélecteur spécifiée, utilisez le ' querySelectorAll() ' méthode.
Syntaxe
Pour utiliser la méthode 'querySelector()', utilisez la syntaxe suivante :
document. querySelector ( sélecteur ) ;
Ici, le sélecteur sera un identifiant ou une classe comme ' #identifiant ”, “ .classe ” :
Vous pouvez également utiliser la syntaxe donnée pour rechercher l'élément en fonction de la valeur de l'attribut :
document. querySelector ( '[sélecteur='valeur']' ) ;
Dans la syntaxe ci-dessus, ' sélecteur ' sera ' identifiant ' ou ' classe ', ou la ' valeur ' sera ' idName ' ou ' nom du cours ”.
Exemple
Dans un fichier HTML, créez un élément div contenant un titre à l'aide de l'élément h4, un texte brut à l'aide de la balise et un div pour un message avec l'identifiant attribué ' message ” :
< identifiant div = 'div' style = 'text-align:center ;' >< h4 classe = 'seconde' identifiant = 'titre' > Trouver un Élément dans DOM Basé sur un Attribut Valeur h4 >
< identifiant de plage = 'accueillir' > Bienvenue sur Linuxhint portée >
< identifiant div = 'message' >
< identifiant p = 'message' > Bonjour gars ! Bienvenue sur les tutoriels JavaScript de Linuxhint p >
div >
div >
La page ressemblera à ceci :
Maintenant, nous allons obtenir l'élément où l'id ' message ' est attribué à l'aide de la touche ' querySelector() ' méthode:
chaque élément = document. querySelector ( '#message' )Enfin, imprimez l'élément sur la console :
console. enregistrer ( élément ) ;Dans la sortie, le ' div 'l'élément est affiché avec son identifiant attribué' message ”, ce qui indique que l'élément requis a été récupéré avec succès :
Vous pouvez également obtenir l'élément en utilisant la syntaxe donnée. Ici, nous allons récupérer l'élément dont l'id est ' msg ” :
chaque élément = document. querySelector ( '[id='msg']' ) ;Sortir
Maintenant, mettez à jour sa couleur en utilisant le ' style ' propriété:
élément. style . couleur = 'bleu' ;Comme vous pouvez le voir, le texte était en ' vert ' couleur, et maintenant il a été mis à jour pour ' bleu ” :
Il s'agit de trouver un élément dans un DOM basé sur une valeur d'attribut.
Conclusion
Pour trouver un élément dans DOM basé sur une valeur d'attribut, utilisez le ' querySelector() ” méthode qui donne le premier élément du document qui correspond à la valeur de sélecteur CSS spécifiée. De plus, pour obtenir tous les éléments qui correspondent à la valeur de sélecteur spécifiée, utilisez le ' querySelectorAll() ' méthode. Ce didacticiel décrit la procédure de recherche de l'élément DOM en fonction de n'importe quelle valeur d'attribut.