為什麼在 JavaScript 中選擇 `getElementsByClassName` 而不是 `getElementById`？

按類別取得元素：JavaScript 中getElementById 的替代方法

在Web 開發領域，getElementById 方法一出現就佔據了至高無上的地位存取HTML 文件中的特定元素。然而，在某些情況下，利用 getElementByClass 可能更合適。

隨著 Firefox 和 Chrome 等現代瀏覽器的出現，getElementByClass 已成為本機支援的功能。然而，對於像 Internet Explorer 這樣的瀏覽器，需要一種解決方法來模擬其功能。

建立自訂getElementsByClass 函數

著名JavaScript 專家達斯汀·迪亞茲(Dustin Diaz) 設計了一個巧妙的解決方案來解決缺乏本機getElementByClass支持的問題。他的方法涉及創建一個模仿其行為的自訂函數：

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

將函數與切換腳本整合

將此自訂函數與提供的切換無縫整合腳本，只需將getElementById 呼叫替換為getElementsByClassName，如圖所示下面：

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

結論

透過實作此自訂getElementsByClass 函數，您可以利用class 屬性來切換元素的可見性，即使本機支援getElementByClass缺乏。該解決方案使開發人員能夠利用基於類別的元素識別的優勢，確保不同瀏覽器之間的行為一致。

以上是為什麼在 JavaScript 中選擇 `getElementsByClassName` 而不是 `getElementById`？的詳細內容。更多資訊請關注PHP中文網其他相關文章！