Encuentra un elemento en DOM basado en un valor de atributo

¿Puede decirme si hay alguna API DOM que busque un elemento con un nombre de atributo y un valor de atributo dados:

Algo como:

doc.findElementByAttribute("myAttribute", "aValue");

Actualización: en los últimos años, el panorama ha cambiado drásticamente. Ahora puede usar de manera confiable querySelectory querySelectorAll, vea la respuesta de Wojtek sobre cómo hacerlo.

No hay necesidad de una dependencia jQuery ahora. Si está utilizando jQuery, genial ... si no lo está, no necesita confiar en él solo para seleccionar elementos por atributos.

No hay una manera muy corta de hacer esto en JavaScript vainilla, pero hay algunas soluciones disponibles.

Hace algo como esto, recorre elementos y verifica el atributo

Si una biblioteca como jQuery es una opción, puede hacerlo un poco más fácil, así:

$("[myAttribute=value]")

Si el valor no es un identificador CSS válido (tiene espacios o signos de puntuación, etc.), necesita comillas alrededor del valor (pueden ser simples o dobles):

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

También se puede hacer start-with, ends-with, contains, etc ... hay varias opciones para el selector de atributos .

Los navegadores modernos admiten nativos querySelectorAllpara que pueda hacer:

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

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

Detalles sobre la compatibilidad del navegador:

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

Puede usar jQuery para admitir navegadores obsoletos (IE9 y anteriores):

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

Podemos usar el selector de atributos en DOM usando los métodos document.querySelector()y document.querySelectorAll().

para ti:

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

y usando querySlectorAll():

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

En querySelector()y querySelectorAll()métodos podemos seleccionar objetos como seleccionamos en "CSS".

Más información sobre los selectores de atributos "CSS" en https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

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

ps si conoce el tipo de elemento exacto, agrega el tercer parámetro (es decir div, a, p ...etc...):

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

pero al principio, defina esta función:

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 actualizado por comentarios recomendaciones.

Aquí hay un ejemplo, Cómo buscar imágenes en un documento por atributo src:

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

podrías usar getAttribute:

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

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

Utilice selectores de consulta, ejemplos:

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

input[name]Elementos de entrada con namepropiedad.

[id|=view]Elementos con identificación que comienzan con view-.

[class~=button]Elementos con la buttonclase.