Bir özellik değerine dayalı olarak DOM'da bir öğe bulma

Belirtilen özellik adı ve özellik değerine sahip bir öğeyi arayan DOM API'si olup olmadığını söyleyebilir misiniz?

Gibi bir şey:

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

Güncelleme: Son birkaç yılda manzara büyük ölçüde değişti. Artık güvenilir bir şekilde kullanabilirsiniz querySelectorve bunu nasıl yapacağınıza dair Wojtek'in cevabınaquerySelectorAll bakınız .

Artık jQuery bağımlılığına gerek yok. JQuery kullanıyorsanız, harika ... değilseniz, artık yalnızca niteliklere göre öğeleri seçmek için ona güvenmeniz gerekmez.

Bunu vanilya javascriptinde yapmanın çok kısa bir yolu yok, ancak bazı çözümler var.

Böyle bir şey yaparsınız, öğeler arasında dolaşırsınız ve özelliği kontrol edersiniz

JQuery gibi bir kitaplık bir seçenekse , bunu biraz daha kolay yapabilirsiniz, şöyle:

$("[myAttribute=value]")

Değer geçerli bir CSS tanımlayıcısı değilse (içinde boşluklar veya noktalama işaretleri vb. Varsa), değer çevresinde tırnak işaretleri kullanmanız gerekir (bunlar tek veya çift olabilir):

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

Ayrıca yapabilirsiniz start-with, ends-with, contains, vb ... nitelik seçicinin için çeşitli seçenekler vardır .

Modern tarayıcılar querySelectorAllaşağıdakileri yapabilmeniz için yerel ayarları destekler :

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

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

Tarayıcı uyumluluğu hakkında ayrıntılar:

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

JQuery'yi eski tarayıcıları (IE9 ve daha eski) desteklemek için kullanabilirsiniz:

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

DOM'da özellik seçiciyi document.querySelector()ve document.querySelectorAll()yöntemlerini kullanarak kullanabiliriz .

senin için:

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

ve şunu kullanarak querySlectorAll():

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

Gelen querySelector()ve querySelectorAll()biz "CSS" in seçerken yöntemler biz nesneleri seçebilir.

Https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors adresindeki "CSS" özellik seçicileri hakkında daha fazla bilgi

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

ps tam eleman türünü biliyorsanız, 3. parametreyi (yani div, a, p ...etc...) eklersiniz :

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

ancak ilk önce bu işlevi tanımlayı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 yorum başına öneriler güncellendi.

Aşağıda, bir belgedeki görüntüleri src özelliğine göre arama örneği verilmiştir:

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

getAttribute kullanabilirsiniz:

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

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

Sorgu seçicileri kullanma, örnekler:

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

input[name]Özellikli öğeleri girer name.

[id|=view]İle başlayan kimliği olan öğeler view-.

[class~=button]buttonSınıf elemanları .