Encontre um elemento no DOM com base em um valor de atributo

Você pode me dizer se existe alguma API DOM que procure por um elemento com determinado nome de atributo e valor de atributo:

Algo como:

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

Atualização: Nos últimos anos, o cenário mudou drasticamente. Agora você pode usar com segurança querySelectore querySelectorAll, consulte a resposta da Wojtek para saber como fazer isso.

Não há necessidade de uma dependência do jQuery agora. Se você estiver usando jQuery, ótimo ... se não estiver, não precisará mais confiar apenas na seleção de elementos por atributos.

Não há uma maneira muito curta de fazer isso em javascript vanilla, mas existem algumas soluções disponíveis.

Você faz algo assim, percorrendo elementos e verificando o atributo

Se uma biblioteca como o jQuery for uma opção, você poderá fazê-lo um pouco mais fácil, assim:

$("[myAttribute=value]")

Se o valor não for um identificador CSS válido (possui espaços ou pontuação, etc.), você precisará de aspas ao redor do valor (elas podem ser únicas ou duplas):

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

Você também pode fazer start-with, ends-with, contains, etc ... existem várias opções para o seletor de atributo .

Navegadores modernos oferecem suporte nativo querySelectorAllpara que você possa:

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

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

Detalhes sobre a compatibilidade do navegador:

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

Você pode usar o jQuery para oferecer suporte a navegadores obsoletos (IE9 e anteriores):

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

Podemos usar seletor de atributo no DOM usando document.querySelector()e document.querySelectorAll()métodos.

para o seu:

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

e usando querySlectorAll():

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

Nos métodos querySelector()e querySelectorAll()podemos selecionar objetos como selecionamos em "CSS".

Mais sobre os seletores de atributos "CSS" em https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

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

ps se você souber o tipo exato de elemento, adicione o terceiro parâmetro (ou seja div, a, p ...etc...):

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

mas, a princípio, defina esta função:

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 atualizado por recomendações de comentários.

Aqui está um exemplo, Como procurar imagens em um documento pelo atributo src:

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

você poderia usar getAttribute:

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

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

Use seletores de consulta, exemplos:

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

input[name]Insere elementos com namepropriedade.

[id|=view]Elementos com ID que começam com view-.

[class~=button]Elementos com a buttonclasse.