如何在没有 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>

通过替换getElementById 函数与 getElementsByClassName 函数一起调用，我们的脚本现在可以根据元素的类属性切换元素的可见性。这使我们能够控制动态生成的元素的可见性，而无需依赖唯一的 ID。

以上是如何在没有 getElementById 的情况下使用 JavaScript 按类获取元素？的详细内容。更多信息请关注PHP中文网其他相关文章！