Comment obtenir un élément par attribut dans JavaScript

Lors du développement de sites Web, il existe certaines situations où les programmeurs / développeurs doivent obtenir les éléments en JavaScript en utilisant leurs attributs assignés tels que «identifiant","classe", et ainsi de suite. Pour ce faire, utilisez le javascript "QuerySelector ()" méthode.

Ce tutoriel expliquera le processus pour obtenir l'élément HTML par attribut à l'aide de JavaScript.

Comment obtenir un élément par attribut dans JavaScript?

Pour obtenir un élément par attribut, le «QuerySelector ()"La méthode est utilisée. Il renvoie le premier élément du document qui correspond à l'attribut particulier. Cette méthode sélectionne une balise particulière avec une valeur d'attribut spécifique. Les paramètres qui doivent être adoptés sont le «Tagide","classe", et ainsi de suite.

Syntaxe
Utilisez la syntaxe mentionnée ci-dessous pour obtenir l'élément par attribut:

document.queySelector ("[myAttribute = valeur]");

Dans la syntaxe ci-dessus, passez l'attribut avec sa valeur attribuée en tant que paramètre.

Exemple
Dans le fichier html, créez d'abord un «div"Élément à l'aide de la balise et attribuez un ID"divide«À lui. Créez un bouton à l'intérieur de l'élément div et attachez un "sur clic”Événement qui déclenchera le"getElement ()”Méthode pour obtenir l'élément:

Cliquez pour obtenir un élément


Cliquez sur

Pour styliser le div, nous utiliserons les lignes de code ci-dessous:

#Divid
rembourrage: 10px;
hauteur: 100px;
Largeur: 200px;
marge: auto;
Color en arrière-plan: rose;

La sortie correspondante sera la suivante:

Dans le fichier JavaScript, définissez une fonction "getElement ()"Cela se déclenchera pendant que le bouton est cliqué. Appeler le "QuerySelector ()"Méthode et transmettez l'attribut"identifiant"Et sa valeur"divide"Comme argument et stocker l'élément résultant dans une variable"élément»:

fonction getElement ()
var élément = document.queySelector ('[id = "divid"]');
alerte (élément);

La sortie donnée montre que l'attribut "divide"Appartient à un élément"div»:

Si vous souhaitez voir tous les éléments à l'intérieur de l'élément spécifique, au lieu d'appeler la méthode alert (), utilisez «console.enregistrer()”Méthode qui montrera l'élément comprenant ses éléments enfants.

fonction getElement ()
var élément = document.queySelector ('[id = "divid"]');
console.log (élément);

Sortir

Le GIF ci-dessus montre le HTML "div”Élément qui a un attribut avec la valeur"divide», Avec ses éléments enfants dans la console en cliquant sur le bouton.

Conclusion

Pour obtenir un élément par attribut, utilisez le JavaScript prédéfini "QuerySelector ()" méthode. Il est utilisé pour sélectionner une balise particulière avec une valeur d'attribut spécifique. Ce tutoriel explique le processus pour obtenir l'élément HTML par attribut à l'aide de JavaScript.