Trouver un élément dans DOM en fonction d'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");

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

Il n'y a plus besoin d'une dépendance jQuery maintenant. Si vous utilisez jQuery, tant mieux ... sinon, vous n'avez plus besoin de vous y fier uniquement pour sélectionner des éléments par attributs.

Il n'y a pas de moyen très court de le faire en javascript vanille, mais il existe des solutions 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 un identifiant CSS valide (elle contient des espaces ou de la 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 y a plusieurs options pour le sélecteur d'attribut .

Les navigateurs modernes prennent en charge natif querySelectorAllafin que vous puissiez faire:

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

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

Détails sur la compatibilité du navigateur:

• http://quirksmode.org/dom/core/#t14
• http://caniuse.com/queryselector

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

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

Nous pouvons utiliser le sélecteur d'attributs 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 querySelector()et les querySelectorAll()méthodes, 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

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

ps si vous connaissez le type d'élément exact, vous ajoutez le 3ème paramètre (ie 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]; }
  }
}

ps mis à jour par les recommandations des commentaires.

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

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

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

Utilisez des sélecteurs de requête, des exemples:

document.querySelectorAll(' input[name], [id|=view], [class~=button] ')

input[name]Entrer des éléments avec une namepropriété.

[id|=view]Éléments dont l'id commence par view-.

[class~=button]Éléments avec la buttonclasse.