针对特定用途的getElementsByClassName的填充解决方案

Question

如何使 this.getElementsByClassName('class')[0] 在Internet Explorer 6-8中工作？是否有任何polyfill可以修复此问题？

- user2799274

---

你为什么还在尝试支持这么老的IE版本？ - Itay

我不支持IE6和IE7，但在工作中被要求这样做。 - user2799274

也许你可以和他们谈判。他们告诉了你为什么需要它吗？ - Itay

很遗憾，这是一个银行网站，他们告诉我要使其兼容使用IE的0.7-0.8%的用户。 - user2799274

顺便提一下，在那种情况下，你应该使用 document.querySelector。 - Ry-

这个 polyfill 怎么样？http://javascript.boxsheep.com/polyfills/document-getElementsByClassName/ - gouessej

Answer 1

仅供参考，旧版浏览器仍然存在，因为人们不断努力支持它们。

document.getElementsByClassName的Polyfill

话说，通过简短的谷歌搜索，您可以找到这个链接： https://gist.github.com/eikes/2299607

IE6/7的Polyfill如下：

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

基于document.evaluate方法 https://developer.mozilla.org/en-US/docs/Web/API/document.evaluate 编辑：元素.getElementsByClassName的Polyfill

您似乎想在HTML元素而不是文档上调用getElementsByClassName方法。不幸的是，我认为您无法在IE6和7（甚至8）上填充它，正如这个答案所暗示的那样： How to add my own methods to HTMLElement object? 您仍然可以使用document.evaluate来实现您想要的功能（提示：第二个参数是上下文节点，应该是您的元素），但您需要将调用代码更改为以下内容：

<div onclick="myPolyfill('class', this)[0].innerHTML = 'works'">

- Tibos

---

你说得对，我不支持IE6和IE7，但是在工作中被要求这样做。无论如何，它并不起作用。试试这个：http://pastebin.com/PkGSgXMx - user2799274

很不幸，我目前无法在IE6上进行任何测试，并且也无法在IE7上进行测试。你可以尝试拆开它，看看到底是什么出了问题（是document.evaluate方法吗？还是其他什么？等等）。祝你好运！附注：如果你非常绝望，你总可以迭代所有节点并检查它们的classname属性。希望这种方法不会太关键，以至于一个可怕的未优化解决方案会拖慢你整个网站的速度。 - Tibos

非常真实，我和一些无能力的人一起工作。这里是点击后的屏幕截图 http://oi39.tinypic.com/5tyzao.jpg （英文：Object does not support the property or method 'getElementByClassName'）。 - user2799274

嗯，问题是上面的代码定义了document.getElementByClassName方法，而你实际上想要一个元素的方法。不幸的是我认为你不能这样做。我会编辑我的答案以使其更清晰明了。 - Tibos

最后我使用的是querySelector，它也被IE8支持，在IE7-IE8上，我将仅保留您建议的必要功能。谢谢。 - user2799274

“老旧的浏览器仍然存在是因为它们在某些情况下仍然能够正常工作，而且有些用户可能没有升级到新的浏览器版本。” - rvighne