用于特定用途的 getElementsByClassName 的 Polyfill [关闭]答案

【问题标题】：Polyfill for getElementsByClassName for particular uses [closed]用于特定用途的 getElementsByClassName 的 Polyfill [关闭]
【发布时间】：2013-09-27 11:42:49
【问题描述】：

我怎样才能让this.getElementsByClassName('class')[0] 为 Internet Explorer 6-8 工作？有什么 polyfill 可以解决这个问题吗？

【问题讨论】：

为什么还要支持老版本的IE？
我不会支持IE6和IE7，但在工作中要求我这样做。
也许你可以和他们讲道理。他们有没有告诉你为什么需要它？
很遗憾，它是一家银行的网站，然后他们告诉我让它与使用 IE 的 0.7-0.8% 的用户兼容。
顺便说一句，在这种特殊情况下，您可能应该使用document.querySelector。

标签： javascript internet-explorer

【解决方案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

编辑：element.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'">

【讨论】：

你说得对，我不会支持 IE6 和 IE7 但在工作中要求我这样做。无论如何它不起作用。试试这个：pastebin.com/PkGSgXMx
不幸的是，我目前无法以任何方式在 IE6 和 IE7 上进行测试。您可以尝试将其拆开，看看到底是什么不起作用（是 document.evaluate 方法吗？还有其他的吗？等等）。祝你好运！ PS：如果您非常绝望，您可以随时遍历所有节点并检查它们的类名属性。希望这种方法不是那么重要，以至于一个非常未优化的解决方案会减慢您的整个网站的速度。
确实如此，我与没有能力的人一起工作。点击oi39.tinypic.com/5tyzao.jpg后出现的画面（英文：Object does not support the property or method 'getElementByClassName'）。
嗯，对。问题是上面的代码定义了 document.getElementByClassName 方法，而您实际上想要一个用于元素的方法。不幸的是，我认为你做不到。我将编辑我的答案以使其清楚。
最后，我使用的是 IE8 也支持的 querySelector，在 IE7-IE8 上，我将只保留您建议的重要功能。谢谢。