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

时间:2011-07-05 14:49:28

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

以下代码:

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

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

  

对象不支持此方法

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

我不想使用JQuery。

5 个答案:

答案 0 :(得分:14)

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

答案 1 :(得分:12)

solution可能有所帮助。这是一个在纯JavaScript中实现的自定义getElementsByClassName函数,可以在IE中使用。

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

  1. 原生document.getElementsByClassName功能。
  2. document.evaluate函数,允许评估XPath查询。
  3. 遍历DOM树。
  4. 当然第一个是性能最好的,但后者应该可以在任何地方使用,包括IE 6。

    页面上也提供的用法示例如下所示:

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

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

    更新。博客文章中关联的解决方案托管在2016年1月关闭的Google代码中。但作者已将其提供给GitHub。感谢flodin在评论中指出这一点。

答案 2 :(得分:5)

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/

答案 3 :(得分:5)

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

如果您对此不感兴趣,可以使用自己喜欢的搜索引擎查找其他搜索引擎。

答案 4 :(得分:-1)

如果getElementsByClassname不支持,则在某些旧浏览器中出错 试试吧 var modal = document.getElementById(&#39; myModal&#39;); modal.onclick = function(){      然后使用getElementById执行任何onclick函数或其他函数      modal.style.display =&#34; none&#34 ;; }