Temukan elemen dalam DOM berdasarkan nilai atribut

252

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");

javascript dom

— michael
sumber

1

Gandakan jika Anda mencari Jquery Sol: stackoverflow.com/questions/696968/…

— Rajat

13

Bisakah Anda memperbarui jawaban yang diterima ke solusi modern, jawaban Wojtek?

— Nick Craver

165

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 .

— Nick Craver
sumber

6

Sebenarnya vanilla JavaScript DOM API bekerja dengan sangat baik di browser modern

— Wojtek Kruszewski

2

@WojtekKruszewski tidak pada tahun 2010 :) Saya melakukan pembaruan, semoga penanya akan memindahkan penerimaan untuk kami - kami ingin info terkini di luar sana.

— Nick Craver

1

Saya pikir jQuery (atau setara) mungkin yang paling mudah terutama untuk menjadi cross browser yang kompatibel tanpa harus tahu apa yang diperlukan.

— Alexis Wilke

1

Saya terus mendapatkan array kosong! Saya mencoba mengambil SVG dengan atribut d, dan saya mencoba $ ("[d = path]"); di mana 'path' adalah variabel yang berisi atribut d-spesifik yang saya butuhkan. Adakah yang mencoba melakukan ini dengan jalur svg?

— tx291

438

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:

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

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

— Wojtek Kruszewski
sumber

2

untuk mengkonkretkan "modern" Definisi: caniuse.com/#search=querySelectorAll

— serhio

Tampaknya nilai tidak dapat berupa angka atauSyntaxError: An invalid or illegal string was specified

— jeum

3

Pemilih harus:'[data-foo="value"]'

— Yotam Omer

1

Adakah catatan tentang kinerja? Apakah ini lebih cepat dari iterasi semua node?

— Stepan Yakovenko

1

Apa itu "data-foo" ... dan di mana 'myAttribute' ada dalam contoh ini?

— oo_dev

38

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

— Naveen Pantra
sumber

Saya harus menghapus tanda kutip dalam seperti document.querySelectorAll ini ("selector [myAttribute = aValue]");

— Matjaz Hirsman

20

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.

— T.Todua
sumber

6

Kenapa? Anda mengulangi semua DOM Anda dengan melakukan ini

— Arthur

3

Ini tampak hebat - jika Anda hanya memiliki 5 elemen pada halaman.

— sheriffderek

2

document.querySelectorAll('[data-foo="value"]');seperti yang diusulkan oleh @Wojtek Kruszewski pada awnser yang diterima.

— Arthur

7

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

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

— KhaledDev
sumber

6

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

— Deke
sumber

2

Dia ingin memilih pelemen tanpa menggunakan idatau setiap ppada DOM (dan menguji atribut)

— Arthur

0

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.

— Daniel De León
sumber