Temukan elemen dalam DOM berdasarkan nilai atribut

Bisakah Anda memberi tahu saya jika ada DOM API yang mencari elemen dengan nama atribut dan nilai atribut yang diberikan:

Sesuatu seperti:

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

Pembaruan: Dalam beberapa tahun terakhir lanskap telah berubah secara drastis. Anda sekarang dapat dengan andal menggunakan querySelectordan querySelectorAll, lihat jawaban Wojtek untuk bagaimana melakukan ini.

Tidak perlu ketergantungan jQuery sekarang. Jika Anda menggunakan jQuery, bagus ... jika tidak, Anda tidak perlu hanya mengandalkan elemen untuk memilih atribut.

Tidak ada cara yang sangat singkat untuk melakukan ini di javascript vanilla, tetapi ada beberapa solusi yang tersedia.

Anda melakukan sesuatu seperti ini, mengulang elemen dan memeriksa atribut

Jika pustaka seperti jQuery adalah opsi, Anda dapat melakukannya dengan sedikit lebih mudah, seperti ini:

$("[myAttribute=value]")

Jika nilainya bukan pengidentifikasi CSS yang valid (memiliki spasi atau tanda baca di dalamnya, dll.), Anda perlu tanda kutip di sekitar nilai (mereka dapat tunggal atau ganda):

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

Anda juga dapat melakukan start-with, ends-with, contains, dll ... ada beberapa pilihan untuk selector atribut .

Browser modern mendukung bahasa asli querySelectorAllsehingga Anda dapat melakukannya:

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

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

Detail tentang kompatibilitas browser:

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

Anda dapat menggunakan jQuery untuk mendukung browser yang usang (IE9 dan yang lebih lama):

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

Kita dapat menggunakan pemilih atribut di DOM dengan menggunakan document.querySelector()dan document.querySelectorAll()metode.

untukmu:

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

dan dengan menggunakan querySlectorAll():

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

Dalam querySelector()dan querySelectorAll()metode kita dapat memilih objek seperti yang kita pilih dalam "CSS".

Lebih lanjut tentang pemilih atribut "CSS" di https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

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

ps jika Anda tahu tipe elemen yang tepat, Anda menambahkan parameter ke-3 (yaitu div, a, p ...etc...):

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

tetapi pada awalnya, tentukan fungsi ini:

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 diperbarui per rekomendasi komentar.

Berikut ini contohnya, Cara mencari gambar dalam dokumen berdasarkan atribut src:

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

Anda bisa menggunakan getAttribute:

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

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

Gunakan penyeleksi kueri, contoh:

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

input[name] Input elemen dengan name properti.

[id|=view] Elemen dengan id yang dimulai dengan view- .

[class~=button]Elemen dengan buttonkelas.