Bagaimanakah anda mendapatkan semula elemen mengikut kelas dalam JavaScript apabila getElementByClass tidak disokong?

Mendapatkan Elemen mengikut Kelas dalam JavaScript

Dalam JavaScript, kaedah getElementById biasanya digunakan untuk mendapatkan semula elemen oleh pengecam uniknya. Walau bagaimanapun, sesetengah senario memerlukan mendapatkan semula elemen berdasarkan nama kelasnya dan memandangkan JavaScript tidak menyokong getElementByClass secara asli, pendekatan alternatif diperlukan.

Kaedah Dustin Diaz:

Satu kaedah untuk mendapatkan semula elemen mengikut kelas ialah fungsi yang dicipta oleh Dustin Diaz:

<code class="javascript">function getElementByClass(searchClass, node) {
  if (node == null) {
    node = document;
  }

  var classElements = [];
  var els = node.getElementsByTagName("*");
  var elsLen = els.length;
  var pattern = new RegExp("(^|\s)" + searchClass + "(\s|$)", "i");
  var i;
  var j = 0;

  for (i = 0; i < elsLen; i++) {
    if (pattern.test(els[i].className)) {
      classElements[j] = els[i];
      j++;
    }
  }

  return classElements;
}</code>

Penggunaan:

Fungsi ini boleh digunakan bersama dengan skrip togol disediakan dalam soalan:

<code class="javascript">function toggle_visibility(className) {
  var elements = getElementByClass(className, document);
  var 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>

Kaedah Asli:

Dalam versi terkini pelayar utama seperti Firefox, Chrome, IE dan Opera, kaedah getElementsByClassName disokong secara asli. Ini memudahkan proses mendapatkan semula elemen mengikut kelas:

<code class="javascript">function getElementsByClassName(className, node) {
  if (node.getElementsByClassName) {
    return node.getElementsByClassName(className);
  } else {
    // Use Dustin Diaz method as fallback
    return getElementByClass(className, node);
  }
}</code>

Atas ialah kandungan terperinci Bagaimanakah anda mendapatkan semula elemen mengikut kelas dalam JavaScript apabila getElementByClass tidak disokong?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!