Trouver un élément dans DOM en fonction d'une valeur d'attribut

Dans diverses situations, vous devrez peut-être trouver un élément dans le DOM en fonction d'une valeur d'attribut pour appliquer tout style ou toute autre fonctionnalité. Par exemple, tout en travaillant avec des pages Web grandes ou complexes ou sélectionnant un élément spécifique en fonction de ses attributs pour style ou manipuler. Il aide à travailler plus efficacement et efficacement avec les pages Web.

Ce tutoriel décrira la procédure pour trouver l'élément DOM en fonction de toute valeur d'attribut.

Comment trouver / 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 du sélecteur CSS donné.

Note: Pour obtenir tous les éléments qui correspondent à la valeur du sélecteur spécifié, utilisez le «queySelectorall ()" méthode.

Syntaxe

Pour utiliser la méthode «queySelector ()», utilisez la syntaxe suivante:

document.queySelector (sélecteur);

Ici, le sélecteur sera un identifiant ou une classe comme «#identifiant",".classe»:

Vous pouvez également utiliser la syntaxe donnée pour trouver l'élément en fonction de la valeur d'attribut:

document.queySelector ("[Selector = 'Value']");

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 qui contient un titre à l'aide de l'élément H4, un texte brut utilisant la balise et un div pour un message avec ID attribué "message»:

Trouver un élément dans DOM en fonction d'une valeur d'attribut

= "Welcome"> Bienvenue à Linuxhint

Bonjour gars! Bienvenue sur les tutoriels JavaScript LinuxHint

La page ressemblera à la suite:

Maintenant, nous obtiendrons l'élément où l'identifiant "message"Est attribué à l'aide du"QuerySelector ()" méthode:

var élément = document.queySelector ('# message')

Enfin, imprimez l'élément sur la console:

console.log (élément);

Dans la sortie, le «div"L'élément est affiché avec son ID attribué"message», 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 aurons l'élément dont l'identification est «msg»:

var élément = document.queySelector ("[id = 'msg']");

Sortir

Maintenant, mettez à jour sa couleur à l'aide du «style" propriété:

élément.style.color = "bleu";

Comme vous pouvez le voir, le texte était dans «vert«Couleur, et maintenant il a été mis à jour à«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 du sélecteur CSS spécifié. De plus, pour obtenir tous les éléments qui correspondent à la valeur du sélecteur spécifié, utilisez le «queySelectorall ()" méthode. Ce tutoriel a décrit la procédure pour trouver l'élément DOM en fonction de toute valeur d'attribut.