Trovare un elemento nel DOM sulla base di un valore di attributo

Question

Può cortesemente dirmi se c'è qualche API DOM, che ricerca di un elemento con data nome di attributo e valore di attributo:

Qualcosa di simile:

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

Answer 1

Aggiornamento: Negli ultimi anni il paesaggio è cambiato drasticamente. È ora possibile utilizzare in modo affidabile querySelector e querySelectorAll, vedere Wojtek's answer per come procedere.

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

---

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

You do something like this, looping through elements and checking the attribute

Se una libreria come jQuery è un'opzione, si può fare un po 'più facile, come questo:

$("[myAttribute=value]") 

Se il valore non è una valida CSS identifier (ha spazi o punteggiatura in esso, ecc), è necessario citazioni intorno al valore (possono essere singole o doppie):

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

si può anche fare start-with, ends-with, contains, ecc ... there are several options for the attribute selector.

Answer 2

Browser moderni supporto nativo querySelectorAll modo da poter fare:

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

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

dettagli circa la compatibilità del browser:

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

È possibile utilizzare jQuery per supportare i browser obsoleti (IE9 e più):

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

Answer 3

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

P.S. se si sa esattamente elemento-tipo, si aggiungono 3 ° parametro (cioè div, a, p ...etc...):

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

ma in un primo momento, definire 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]; } 
    } 
} 

P.S. aggiornato per raccomandazioni commenti.

Answer 4

Ecco un esempio, Come cercare le immagini in un documento attributo src:

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

Answer 5

si potrebbe usare getAttribute:

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

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

Answer 6

Possiamo usare selettore di attributo in DOM utilizzando i metodi document.querySelector() e document.querySelectorAll().

per il vostro:

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

e utilizzando querySlectorAll():

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

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

\' qui rappresenta il carattere di escape e rappresenta infine selector[myAttrubute = aValue] proprio come in "CSS".

più su "CSS" selettori di attributo in https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors