Bagaimana untuk Memilih Elemen mengikut Atribut Apabila querySelectorAll Hilang?

Cara Mendapatkan Elemen Mengikut Atribut Apabila querySelectorAll Tidak Tersedia

Walaupun kelazimannya, kaedah querySelectorAll mungkin tidak boleh diakses secara universal. Sebagai contoh, pelayar lama seperti IE7 kekurangan fungsi ini. Walau bagaimanapun, adalah mungkin untuk mencapai hasil yang serupa menggunakan pendekatan asli yang memastikan keserasian dengan IE7.

Pertimbangkan senario berikut:

<p data-foo="bar"></p>

Lazimnya, seseorang akan menggunakan querySelectorAll untuk mendapatkan semula elemen berdasarkan atribut mereka:

document.querySelectorAll('[data-foo]')

Walau bagaimanapun, jika tiada querySelectorAll, penyelesaian alternatif diperlukan.

Untuk mencapai kefungsian yang sama secara asli, fungsi JavaScript boleh dibina:

function getAllElementsWithAttribute(attribute) {
  var matchingElements = [];
  var allElements = document.getElementsByTagName('*');
  for (var i = 0, n = allElements.length; i < n; i++) {
    if (allElements[i].getAttribute(attribute) !== null) {
      matchingElements.push(allElements[i]);
    }
  }
  return matchingElements;
}

Fungsi ini merentasi keseluruhan dokumen, mendapatkan semula semua elemen dengan atribut tertentu. Dengan menggunakannya:

getAllElementsWithAttribute('data-foo');

seseorang boleh mendapatkan semula elemen dengan atribut "data-foo" dengan berkesan. Penyelesaian ini komprehensif dan serasi dengan IE7, membolehkan akses kepada elemen mengikut atribut walaupun dalam pelayar yang tidak mempunyai querySelectorAll.

Atas ialah kandungan terperinci Bagaimana untuk Memilih Elemen mengikut Atribut Apabila querySelectorAll Hilang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!