Bagaimanakah anda mendapatkan semula elemen mengikut kelas dalam JavaScript apabila getElementByClass tidak disokong?-tutorial js-php.cn

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

Barbara Streisand

Lepaskan： 2024-11-07 03:07:02

asal

277 orang telah melayarinya

How do you retrieve elements by class in JavaScript when getElementByClass is not supported?

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!