getElementsByClassName()在IE6,IE7,IE8等旧的Internet Explorer中不起作用

Question

以下代码:

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

在Internet Explorer 6,7和8中给出了一条错误消息:

对象不支持此方法

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

我不想使用JQuery.

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

Answer 2

此解决方案可能有所帮 这是一个getElementsByClassName在纯JavaScript中实现的自定义函数,适用于IE.

基本上这个脚本正在做的是逐个探测所有可能的选项并选择最好的选项.这些选项是:

1. 本机document.getElementsByClassName功能.
2. document.evaluate function,允许评估XPath查询.
3. 遍历DOM树.

当然第一个是性能最好的,但后者应该可以在任何地方使用,包括IE 6.

用法示例(也在页面上可用)如下所示:

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

因此该函数允许3个参数:class(必需),标记名称(可选,如果未指定则搜索所有标记),根元素(可选,文档,如果未指定).

更新.博客文章中链接的解决方案托管在2016年1月关闭的Google Code上.但是作者已将其发布在GitHub上.荣誉对弗洛丁在评论中指出了这一点.

Answer 3

该方法在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/

Answer 4

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

如果您不喜欢它,可以使用自己喜欢的搜索引擎找到不同的搜索引擎.