Mengapa Pilih `getElementsByClassName` daripada `getElementById` dalam JavaScript?

Dapatkan Elemen mengikut Kelas: Alternatif untuk getElementById dalam JavaScript

Dalam bidang pembangunan web, kaedah getElementById berkuasa apabila ia datang untuk mengakses elemen tertentu dalam dokumen HTML. Walau bagaimanapun, terdapat keadaan di mana memanfaatkan getElementByClass boleh terbukti lebih sesuai.

Dengan kemunculan penyemak imbas moden seperti Firefox dan Chrome, getElementByClass telah muncul sebagai ciri yang disokong asli. Walau bagaimanapun, untuk penyemak imbas seperti Internet Explorer, penyelesaian diperlukan untuk mencontohi fungsinya.

Mencipta Fungsi getElementsByClass Tersuai

Dustin Diaz, pakar JavaScript yang terkenal, telah mencipta penyelesaian yang bijak untuk menangani kekurangan sokongan getElementByClass asli. Pendekatannya melibatkan mencipta fungsi tersuai yang meniru gelagatnya:

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

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

Menyepadukan Fungsi dengan Skrip Togol

Untuk menyepadukan fungsi tersuai ini dengan lancar dengan togol yang disediakan skrip, cuma gantikan panggilan getElementById dengan getElementsByClassName, seperti yang dilihat di bawah:

<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>

Kesimpulan

Dengan melaksanakan fungsi getElementsByClass tersuai ini, anda boleh memanfaatkan atribut kelas untuk menogol keterlihatan elemen, walaupun sokongan asli untuk getElementByClass adalah kurang. Penyelesaian ini memberi kuasa kepada pembangun untuk memanfaatkan faedah pengenalan unsur berasaskan kelas, memastikan gelagat yang konsisten merentas penyemak imbas yang berbeza.

Atas ialah kandungan terperinci Mengapa Pilih `getElementsByClassName` daripada `getElementById` dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!