web-dev-qa-db-fra.com

Rechercher un élément dans DOM basé sur une valeur d'attribut

Pouvez-vous me dire s'il existe une API DOM qui recherche un élément avec un nom d'attribut et une valeur d'attribut donnés:

Quelque chose comme:

doc.findElementByAttribute("myAttribute", "aValue");
javascriptdom
195
michael

Mise à jour: Au cours des dernières années, le paysage a radicalement changé. Vous pouvez maintenant utiliser querySelector et querySelectorAll de manière fiable, voir réponse de Wojtek pour savoir comment procéder.

Il n'y a pas besoin d'une dépendance jQuery maintenant. Si vous utilisez jQuery, excellent ... si vous ne l'utilisez pas, vous ne devez plus vous en fier uniquement pour sélectionner des éléments par attributs.

Il n’est pas très facile de faire cela en javascript dans Vanilla, mais certaines solutions sont disponibles.

Vous faites quelque chose comme ça, en parcourant les éléments et en vérifiant l'attribut

Si une bibliothèque comme jQuery est une option, vous pouvez le faire un peu plus facilement, comme ceci:

$("[myAttribute=value]")

Si la valeur n'est pas valide identificateur CSS (elle contient des espaces ou des signes de ponctuation, etc.), vous avez besoin de guillemets autour de la valeur (ils peuvent être simples ou doubles):

$("[myAttribute='my value']")

Vous pouvez également faire start-with, ends-with, contains, etc ... il existe plusieurs options pour le sélecteur d'attribut .

134
Nick Craver

Les navigateurs modernes prennent en charge le langage natif querySelectorAll pour que vous puissiez effectuer les tâches suivantes:

document.querySelectorAll('[data-foo="value"]');

https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll

Détails sur la compatibilité du navigateur:

Vous pouvez utiliser jQuery pour prendre en charge les navigateurs obsolètes (IE9 et les versions antérieures):

$('[data-foo="value"]');
351
Wojtek Kruszewski

Nous pouvons utiliser le sélecteur d'attribut dans DOM en utilisant les méthodes document.querySelector() et document.querySelectorAll().

pour le vôtre:

document.querySelector("selector[myAttribute='aValue']");

et en utilisant querySlectorAll():

document.querySelectorAll("selector[myAttribute='aValue']");

Dans les méthodes querySelector() et querySelectorAll(), nous pouvons sélectionner des objets comme nous le sélectionnons dans "CSS".

En savoir plus sur les sélecteurs d'attributs "CSS" dans https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

24
Naveen Pantra
FindByAttributeValue("Attribute-Name", "Attribute-Value");

p.s. si vous connaissez le type d'élément exact, ajoutez le troisième paramètre (i.e .div, a, p ...etc...):

FindByAttributeValue("Attribute-Name", "Attribute-Value", "div");

mais au début, définissez cette fonction:

function FindByAttributeValue(attribute, value, element_type)    {
  element_type = element_type || "*";
  var All = document.getElementsByTagName(element_type);
  for (var i = 0; i < All.length; i++)       {
    if (All[i].getAttribute(attribute) == value) { return All[i]; }
  }
}

p.s. mis à jour selon les recommandations de commentaires.

18
T.Todua

Voici un exemple, Comment rechercher des images dans un document par l'attribut src:

document.querySelectorAll("img[src='https://pbs.twimg.com/profile_images/........jpg']");
3
KhaledDev

vous pouvez utiliser getAttribute:

 var p = document.getElementById("p");
 var alignP = p.getAttribute("align");

https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute

3
Deke