当不支持 getElementByClass 时，如何在 JavaScript 中按类检索元素？

在 JavaScript 中按类获取元素

在 JavaScript 中， getElementById 方法通常用于通过唯一标识符检索元素。但是，某些场景需要根据类名检索元素，并且由于 JavaScript 本身不支持 getElementByClass，因此需要替代方法。

Dustin Diaz 方法：

按类检索元素的一种方法是 Dustin Diaz 创建的函数：

<code class="javascript">function getElementByClass(searchClass, node) {
  if (node == null) {
    node = document;
  }

  var classElements = [];
  var els = node.getElementsByTagName("*");
  var elsLen = els.length;
  var pattern = new RegExp("(^|\s)" + searchClass + "(\s|$)", "i");
  var i;
  var j = 0;

  for (i = 0; i < elsLen; i++) {
    if (pattern.test(els[i].className)) {
      classElements[j] = els[i];
      j++;
    }
  }

  return classElements;
}</code>

用法：

此函数可以与切换脚本结合使用问题中提供：

<code class="javascript">function toggle_visibility(className) {
  var elements = getElementByClass(className, document);
  var 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>

本机方法：

在 Firefox、Chrome、IE 和 Opera 等主要浏览器的最新版本中，支持 getElementsByClassName 方法原生地。这简化了按类检索元素的过程：

<code class="javascript">function getElementsByClassName(className, node) {
  if (node.getElementsByClassName) {
    return node.getElementsByClassName(className);
  } else {
    // Use Dustin Diaz method as fallback
    return getElementByClass(className, node);
  }
}</code>

以上是当不支持 getElementByClass 时，如何在 JavaScript 中按类检索元素？的详细内容。更多信息请关注PHP中文网其他相关文章！