为什么在 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中文网其他相关文章！