Trova un elemento in DOM in base a un valore di attributo

Potete per favore dirmi se esiste qualche API DOM che cerca un elemento con il nome e il valore dell'attributo indicati:

Qualcosa di simile a:

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

Aggiornamento: negli ultimi anni il panorama è cambiato drasticamente. Ora puoi utilizzare in modo affidabile querySelectore querySelectorAll, vedi la risposta di Wojtek per sapere come fare.

Non c'è bisogno di una dipendenza jQuery ora. Se stai usando jQuery, fantastico ... se non lo sei, non devi fare affidamento solo sulla selezione degli elementi per attributi.

Non c'è un modo molto breve per farlo in javascript alla vaniglia, ma ci sono alcune soluzioni disponibili.

Fai qualcosa del genere, eseguendo il ciclo tra gli elementi e controllando l'attributo

Se una libreria come jQuery è un'opzione, puoi farlo un po 'più facilmente, in questo modo:

$("[myAttribute=value]")

Se il valore non è un identificatore CSS valido (contiene spazi o punteggiatura, ecc.), Sono necessarie virgolette attorno al valore (possono essere singole o doppie):

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

Si può anche fare start-with, ends-with, contains, ecc ... ci sono diverse opzioni per il selettore di attributo .

I browser moderni supportano nativi in querySelectorAllmodo da poter fare:

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

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

Dettagli sulla compatibilità del browser:

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

È possibile utilizzare jQuery per supportare browser obsoleti (IE9 e precedenti):

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

Possiamo usare il selettore di attributi in DOM usando document.querySelector()e document.querySelectorAll()metodi.

per i tuoi:

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

e usando querySlectorAll():

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

In querySelector()e querySelectorAll()metodi possiamo selezionare oggetti come selezioniamo in "CSS".

Maggiori informazioni sui selettori di attributi "CSS" in https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

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

ps se conosci il tipo esatto di elemento, aggiungi il terzo parametro (es. div, a, p ...etc...):

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

ma all'inizio, definisci questa funzione:

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 aggiornato per raccomandazioni commenti.

Ecco un esempio, Come cercare immagini in un documento in base all'attributo src:

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

potresti usare getAttribute:

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

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

Usa selettori di query, esempi:

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

input[name]Inserisce elementi con nameproprietà.

[id|=view]Elementi con ID che iniziano con view-.

[class~=button]Elementi con la buttonclasse.