getElementsByClassName() 在 IE6、IE7、IE8 等旧 Internet Explorer 中不起作用答案

【问题标题】：getElementsByClassName() doesn't work in old Internet Explorers like IE6, IE7, IE8getElementsByClassName() 在 IE6、IE7、IE8 等旧 Internet Explorer 中不起作用
【发布时间】：2011-09-28 21:40:46
【问题描述】：

以下代码：

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

在 Internet Explorer 6、7 和 8 中给我一条错误消息：

对象不支持此方法

如何在这些浏览器中按类选择元素？

我不喜欢使用 JQuery。

【问题讨论】：

getElementsByClassName & IE 的可能重复项
我认为jQuery支持这样的功能。
使用jQuery 的替代方法是只使用Sizzle selector engine。但如果你只需要按班级选择，那我就写一个替代品。
@ChaosPandion:“我不喜欢使用 JQuery”.

标签： javascript internet-explorer-8 internet-explorer-7 internet-explorer-6 dom-traversal

【解决方案1】：

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/

【讨论】：

【解决方案2】：

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

【讨论】：

实际上，使用\b 可能会导致包含- 的类出现问题。最好添加空格：if((' ' + elem[i].className + ' ').indexOf(' ' + cl + ' ') > -1)...。这就是 jQuery 使用的方法。
我被困在 IE6 中工作。如您的代码所示，似乎 IE6 没有 .indexOf() 。我不得不做一个简短的替换函数： function indexOf(Arr, Match) { var Result = -1;变量我; for (i=0; i

【解决方案3】：

这个solution 可能会有所帮助。这是一个用纯javascript实现的自定义getElementsByClassName函数，适用于IE。

这个脚本所做的基本上是一个一个地探测所有可能的选项，然后选择最好的一个。这些选项是：

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

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

页面上也有使用示例，如下所示：

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

所以该函数允许3个参数：类（必需），标签名称（可选，如果未指定则搜索所有标签），根元素（可选，如果未指定则为文档）。

更新。 博客文章中链接的解决方案托管在 Google 代码上，该代码将于 2016 年 1 月关闭。但作者已通过GitHub 提供。感谢 flodin 在 cmets 中指出这一点。

【讨论】：

-1 仅用于发布链接。根据常见问题解答“鼓励链接到外部资源，但请在链接周围添加上下文，以便您的其他用户了解它是什么以及为什么存在。始终引用重要链接的最相关部分，以防目标网站无法访问或永久离线。”
@codemonkeh，不得不同意，所以让我们改进它吧！更新了帖子。这样看起来更好吗？
未来访问者请注意：链接的解决方案托管在正在关闭的 Google Code 上，但原作者已将其移至 GitHub。
@flodin，感谢您的关注，更新了帖子以获得更好的可见性。

【解决方案4】：

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

This code 提供一个 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;
  }
}

如果您不喜欢它的某些内容，可以使用您最喜欢的搜索引擎来查找其他搜索引擎。

【讨论】：

【解决方案5】：

如果 getElementsByClassname 不支持在某些旧浏览器中是错误的只需尝试 var modal = document.getElementById('myModal'); modal.onclick=函数（）{ 然后使用 getElementById 执行任何 onclick 函数或其他函数 modal.style.display = "无"; }

【讨论】：