Bagaimana untuk Mendapatkan Elemen mengikut Kelas dengan JavaScript Tanpa getElementById?

Dapatkan Elemen mengikut Kelas dengan JavaScript tanpa getElementById

Dalam JavaScript, kaedah getElementById biasanya digunakan untuk mendapatkan semula elemen mengikut ID uniknya. Walau bagaimanapun, apabila bekerja dengan elemen atau elemen yang dijana secara dinamik yang berkongsi ID yang sama, adalah perlu untuk mencari elemen mengikut atribut kelasnya. Walaupun getElementByClass disokong secara asli dalam penyemak imbas moden, ia masih tidak disokong dalam semua penyemak imbas utama, seperti Internet Explorer.

Menggunakan Fungsi untuk Mendapatkan Elemen mengikut Kelas

JavaScript tidak menyediakan kaedah terbina dalam untuk mendapatkan semula elemen mengikut kelas. Walau bagaimanapun, kita boleh mengatasi had ini dengan menggunakan fungsi untuk mencari elemen berdasarkan atribut kelasnya. Satu pelaksanaan yang popular ialah kaedah Dustin Diaz:

<code class="javascript">function getElementsByClassName(node, classname) {
  if (node.getElementsByClassName) { // native implementation available
    return node.getElementsByClassName(classname);
  } else {
    var classElements = [],
        els = node.getElementsByTagName("*"),
        elsLen = els.length,
        pattern = new RegExp("(^|\s)"+classname+"(\s|$)", "i");

    for (var i = 0, j = 0; i < elsLen; i++) {
      if ( pattern.test(els[i].className) ) {
          classElements[j] = els[i];
          j++;
      }
    }
    return classElements;
  }
}</code>

Fungsi ini mengambil nod (biasanya objek dokumen) dan nama kelas sebagai input dan mengembalikan tatasusunan elemen yang sepadan dengan kelas yang ditentukan. Ia mula-mula menyemak sama ada kaedah getElementsByClassName asli wujud, dan jika ya, gunakannya. Jika tidak, ia berulang melalui semua elemen dalam nod dan menyemak sama ada atribut kelas mereka mengandungi nama kelas yang ditentukan.

Menyepadukan dengan Skrip Togol

Sebaik sahaja kita mempunyai fungsi untuk mendapatkan elemen mengikut kelas, kami boleh mengubah suai skrip keterlihatan togol kami untuk menggunakannya:

<code class="javascript">function toggle_visibility(className) {
  var elements = getElementsByClassName(document, className),
      n = elements.length;
  for (var i = 0; i < n; i++) {
    var e = elements[i];
    if(e.style.display == 'block') {
      e.style.display = 'none';
    } else {
      e.style.display = 'block';
    }
  }
}</code>

Dengan menggantikan panggilan fungsi getElementById dengan fungsi getElementsByClassName, skrip kami kini boleh menogol keterlihatan elemen berdasarkan kelasnya atribut. Ini membolehkan kami mengawal keterlihatan elemen yang dijana secara dinamik tanpa bergantung pada ID unik.

Atas ialah kandungan terperinci Bagaimana untuk Mendapatkan Elemen mengikut Kelas dengan JavaScript Tanpa getElementById?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!