getElementsByClassName()在旧版本的Internet Explorer（如IE6、IE7、IE8）中无法正常工作。

Question

以下代码：

var borderTds = document.getElementsByClassName('leftborder');

在Internet Explorer 6、7和8中，我收到了一个错误消息：

对象不支持此方法

我该如何在这些浏览器中通过它们的类选择元素？

我希望不使用JQuery。

- 124697

---

可能是 getElementsByClassName＆IE 的重复问题。 - Felix Kling

我认为jQuery支持这样的功能。 - ChaosPandion

使用jQuery之外的替代方案是直接使用Sizzle选择器引擎。但是如果你只需要按类选择，那么我会写一个替代方案。 - user113716

@ChaosPandion: *"我更喜欢不使用JQuery"*。 - Felix Kling

Answer 1

如果您想在IE6、Netscape 6+、Firefox和Opera 7+中使用，请将以下脚本复制到您的页面中：

document.getElementsByClassName = function(cl) {
  var retnode = [];
  var elem = this.getElementsByTagName('*');
  for (var i = 0; i < elem.length; i++) {
    if((' ' + elem[i].className + ' ').indexOf(' ' + cl + ' ') > -1) retnode.push(elem[i]);
  }
  return retnode;
}; 

- Peter

---

实际上，使用 \b 可能会导致包含 - 的类出现问题。最好添加空格：if((' ' + elem[i].className + ' ').indexOf(' ' + cl + ' ') > -1)...。这是 jQuery 使用的方法。 - Felix Kling

我现在被卡在使用IE6上。看起来IE6不支持代码中的.indexOf()函数。所以我只好自己写了一个替代函数： function indexOf(Arr, Match) { var Result = -1; var i; for (i=0; i < Arr.length; i++) { if (Arr[i] != Match) continue; Result = i; break; } return Result; } - kdtop

Answer 2

这个解决方案可能会有所帮助。这是一个纯 JavaScript 实现的自定义 getElementsByClassName 函数，可在 IE 中使用。

本脚本的基本原理是逐一探测所有可能的选项并选择最佳可用选项。这些选项包括：

1. 原生的 document.getElementsByClassName 函数。
2. document.evaluate 函数，它允许评估 XPath 查询。
3. 遍历 DOM 树。

当然，第一个选项在性能方面是最好的，但后面两个选项应该在任何地方都可用，包括 IE 6。

此页面上也提供了使用示例：

getElementsByClassName("col", "div", document.getElementById("container")); 

所以这个函数允许三个参数：class（必需），标签名称（可选，如果没有指定则搜索所有标签），根元素（可选，默认为文档）。

更新。博客文章中链接的解决方案托管在即将在2016年1月关闭的Google Code上。然而，作者已经在GitHub上提供了它。感谢flodin在评论中指出这一点。

- Andrei

---

-1表示只发布链接。根据FAQ，“鼓励链接到外部资源，但请在链接周围添加上下文，以便您的同行用户了解它是什么以及为什么存在。始终引用最相关的重要链接部分，以防目标站点无法访问或永久离线。” - codemonkeh

@codemonkeh，无法不同意，所以让我们改进它！已更新帖子。这样看起来更好吗？ - Andrei

注意：对未来的访问者说明一下，该链接指向的解决方案托管在即将关闭的Google Code上。但是原始作者已将其迁移到GitHub。 - flodin

@flodin，感谢你发现了这个问题，我更新了帖子以便更好地展示。 - Andrei

Answer 3

Internet Explorer 8及更早版本不支持getElementsByClassName()。如果您只需要针对IE8的解决方案，它支持querySelectorAll()，您可以使用其中之一。对于旧版IE，您必须提供自己的实现，并且对于一些其他支持它的古老浏览器，您也可以使用evaluate()来运行XPath表达式。

这段代码提供了一个document.getElementsByClassName方法，如果它不存在，则使用我所描述的方法：

if (!document.getElementsByClassName) {
  document.getElementsByClassName = function(search) {
    var d = document, elements, pattern, i, results = [];
    if (d.querySelectorAll) { // IE8
      return d.querySelectorAll("." + search);
    }
    if (d.evaluate) { // IE6, IE7
      pattern = ".//*[contains(concat(' ', @class, ' '), ' " + search + " ')]";
      elements = d.evaluate(pattern, d, null, 0, null);
      while ((i = elements.iterateNext())) {
        results.push(i);
      }
    } else {
      elements = d.getElementsByTagName("*");
      pattern = new RegExp("(^|\\s)" + search + "(\\s|$)");
      for (i = 0; i < elements.length; i++) {
        if ( pattern.test(elements[i].className) ) {
          results.push(elements[i]);
        }
      }
    }
    return results;
  }
}

如果你不喜欢其中的某些内容，你可以使用你喜欢的搜索引擎来寻找其他的选择。

- kapa

Answer 4

在IE6中不存在该方法。如果您想通过类名选择元素而又不想使用库，您只需循环遍历页面上的所有元素，并检查它们的className属性中是否包含该类名。

function getElementsByClassName(className) {
  var found = [];
  var elements = document.getElementsByTagName("*");
  for (var i = 0; i < elements.length; i++) {
    var names = elements[i].className.split(' ');
    for (var j = 0; j < names.length; j++) {
      if (names[j] == className) found.push(elements[i]);
    }
  }
  return found;
}

演示：http://jsfiddle.net/kYdex/1/

- Guffa

Answer 5

如果getElementsByClassname在一些旧浏览器中不支持，则可以尝试以下方法： var modal = document.getElementById('myModal'); modal.onclick= function(){ 然后使用getElementById执行任何onclick函数或其他函数 modal.style.display = "none"; }

- user1214683