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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6584635/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 22:22:57  来源:igfitidea点击:

getElementsByClassName() doesn't work in old Internet Explorers like IE6, IE7, IE8

javascriptinternet-explorer-8internet-explorer-7internet-explorer-6dom-traversal

提问by code511788465541441

The following code:

以下代码:

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

gives me an error message in Internet Explorer 6, 7 and 8:

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

Object does not support this method

对象不支持此方法

How can I select elements by their class in these browsers?

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

I prefer not to use JQuery.

我不喜欢使用 JQuery。

采纳答案by Andrei

This solutionmay help. This is a custom getElementsByClassNamefunction implemented in pure javascript, that works in IE.

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

Essentially what this script is doing is probing, one by one, all possible options and picks the best one available. These options are:

本质上,该脚本所做的是一项一项地探索所有可能的选项,并选择可用的最佳选项。这些选项是:

  1. Native document.getElementsByClassNamefunction.
  2. document.evaluatefunction, which allows evaluation of XPath queries.
  3. Traversing the DOM tree.
  1. 原生document.getElementsByClassName功能。
  2. document.evaluate函数,它允许评估 XPath 查询。
  3. 遍历 DOM 树。

Of course the first one is the best performance-wise, however the latter should be available everywhere including IE 6.

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

Usage example, which is also available on the page, looks like this:

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

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

So the function allows 3 parameters: class (required), tag name (optional, searches for all tags if not specified), root element (optional, document if not specified).

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

Update.The solution linked in the blog post is hosted on the Google Code which is shutting down in Jan 2016. However the author has made it available on GitHub. Kudos to flodinpointing this out in the comments.

更新。博客文章中链接的解决方案托管在 Google Code 上,该代码将于 2016 年 1 月关闭。然而,作者已在GitHub 上提供了它。荣誉对弗洛丁指出这一点的意见。

回答by Peter

IE6, Netscape 6+, Firefox, and Opera 7+ copy the following script in your page:

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

回答by kapa

Internet Explorer 8 and older does not support getElementsByClassName(). If you only need a solution for IE8, it supports querySelectorAll(), you can use one of these instead. For older IEs you have to provide your own implementation, and for some other ancient browsers that support it you can also use evaluate()which runs XPath expressions.

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

This codeprovides a document.getElementsByClassNamemethod if it does not exist yet using the methods I've described:

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

If you don't like something about it, you can use your favorite search engine to find a different one.

如果你不喜欢它,你可以使用你最喜欢的搜索引擎来找到一个不同的。

回答by Guffa

The method doesn't exist in IE6. If you want to select elements by class and don't want to use a library, you simply have to loop through all elements in the page and check for the class in their classNameproperty.

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

Demo: http://jsfiddle.net/kYdex/1/

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

回答by user1214683

If getElementsByClassname does not support is error in some old browsers Simply try var modal = document.getElementById('myModal'); modal.onclick= function(){ Then do what ever onclick function or another function by using getElementById modal.style.display = "none"; }

如果 getElementsByClassname 不支持在某些旧浏览器中出错只需尝试 var modal = document.getElementById('myModal'); modal.onclick= function(){ 然后使用 getElementById modal.style.display = "none"; }