如何在沒有 getElementById 的情況下使用 JavaScript 按類別取得元素？

使用JavaScript 依類別取得元素，而無需使用getElementById

在JavaScript 中，getElementById 方法通常用於透過元素的唯一ID 擷取元素。然而，當使用動態產生的元素或共用相同 ID 的元素時，有必要透過元素的類別屬性來尋找元素。雖然現代瀏覽器原生支援 getElementByClass，但並非所有主流瀏覽器（例如​​ Internet Explorer）都支援它。

使用函數依類別取得元素

JavaScript 不提供以類別擷取元素的內建方法。但是，我們可以透過使用函數根據類別屬性搜尋元素來克服此限制。一種流行的實作是 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>

此函數採用節點（通常是文件物件）和類別名稱作為輸入，並傳回與指定類別相符的元素陣列。它首先檢查本機 getElementsByClassName 方法是否存在，如果存在，則使用它。否則，它會迭代節點中的所有元素，並檢查它們的類別屬性是否包含指定的類別名稱。

與Toggle 腳本整合

一旦我們有了一個函數要按類別獲取元素，我們可以修改切換可見性腳本來使用它：

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

透過用getElementsByClassName 函數取代getElementById 函數調用，我們的腳本現在可以根據元素的類別切換元素的可見性屬性。這使我們能夠控制動態產生的元素的可見性，而無需依賴唯一的 ID。

以上是如何在沒有 getElementById 的情況下使用 JavaScript 按類別取得元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！