Rumah > hujung hadapan web > tutorial js > Bagaimanakah Saya Boleh Mengesan Elemen DOM Dengan Cekap Berdasarkan Nilai Atribut?

Bagaimanakah Saya Boleh Mengesan Elemen DOM Dengan Cekap Berdasarkan Nilai Atribut?

Linda Hamilton
Lepaskan: 2024-12-04 03:03:11
asal
411 orang telah melayarinya

How Can I Efficiently Locate DOM Elements Based on Attribute Values?

Mencari Elemen dalam DOM Berdasarkan Nilai Atribut

Dalam pembangunan web, selalunya perlu untuk mengakses elemen dalam Model Objek Dokumen (DOM) berdasarkan nilai atribut tertentu.

Pendekatan API DOM Asli

Pelayar moden menyediakan kaedah querySelectorAll, yang membolehkan anda mencari elemen menggunakan pemilih seperti CSS. Untuk mencari elemen berdasarkan nilai atribut, gunakan sintaks berikut:

document.querySelectorAll('[attribute-name="attribute-value"]');
Salin selepas log masuk

Sebagai contoh, untuk mencari semua elemen dengan atribut data-foo ditetapkan kepada "nilai":

document.querySelectorAll('[data-foo="value"]');
Salin selepas log masuk

Perhatikan bahawa kaedah ini mempunyai had keserasian penyemak imbas (lihat rujukan di bawah untuk butiran).

jQuery Alternatif

Jika anda perlu menyokong pelayar lama (IE9 dan ke bawah), anda boleh menggunakan perpustakaan jQuery:

$('[data-foo="value"]');
Salin selepas log masuk

Maklumat Keserasian

  • [Quirksmode DOM teras dokumentasi](http://quirksmode.org/dom/core/#t14)
  • [Bolehkah saya Menggunakan jadual keserasian querySelector](http://caniuse.com/queryselector)

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengesan Elemen DOM Dengan Cekap Berdasarkan Nilai Atribut?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan