Znajdź element w DOM na podstawie wartości atrybutu

Czy możesz mi powiedzieć, czy istnieje interfejs API DOM, który szuka elementu o podanej nazwie atrybutu i wartości atrybutu:

Coś jak:

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

Aktualizacja: W ciągu ostatnich kilku lat krajobraz zmienił się drastycznie. Możesz teraz niezawodnie korzystać querySelectori querySelectorAllzobacz odpowiedź Wojtka, jak to zrobić.

Nie ma teraz potrzeby korzystania z zależności jQuery. Jeśli używasz jQuery, świetnie ... jeśli nie, nie musisz już polegać na samym wybieraniu elementów według atrybutów.

Nie jest to bardzo krótki sposób na zrobienie tego w waniliowym javascript, ale jest kilka dostępnych rozwiązań.

Robisz coś takiego, przeglądając elementy i sprawdzając atrybut

Jeśli biblioteka taka jak jQuery jest opcją, możesz to zrobić trochę łatwiej, na przykład:

$("[myAttribute=value]")

Jeśli wartość nie jest prawidłowym identyfikatorem CSS (zawiera spacje lub znaki interpunkcyjne itp.), Musisz wstawić cudzysłowy wokół wartości (mogą być pojedyncze lub podwójne):

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

Można również zrobić start-with, ends-with, contains, itd ... istnieje kilka opcji dla selektora atrybutu .

Nowoczesne przeglądarki obsługują natywne, querySelectorAlldzięki czemu możesz:

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

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

Szczegóły dotyczące zgodności przeglądarki:

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

Możesz użyć jQuery do obsługi przestarzałych przeglądarek (IE9 i starszych):

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

Możemy użyć selektora atrybutów w DOM przy użyciu document.querySelector()i document.querySelectorAll()metod.

dla twoich:

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

i za pomocą querySlectorAll():

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

W querySelector()i querySelectorAll()metodach możemy wybierać obiekty tak, jak wybieramy w „CSS”.

Więcej informacji o selektorach atrybutów „CSS” w https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

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

ps, jeśli znasz dokładny typ elementu, dodajesz trzeci parametr (tj. div, a, p ...etc...):

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

ale najpierw zdefiniuj tę funkcję:

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 zaktualizowane według rekomendacji komentarzy.

Oto przykład, jak wyszukiwać obrazy w dokumencie według atrybutu src:

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

możesz użyć getAttribute:

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

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

Użyj selektorów zapytań, przykłady:

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

input[name] Wprowadza elementy za pomocą name właściwością.

[id|=view] Elementy o identyfikatorze zaczynające się od view- .

[class~=button]Elementy z buttonklasą.