IE浏览器不支持getElementsByClassName的解决方法

IE浏览器不支持 getElementsByClassName 方法，而该方法可以非常方便地获取文档中指定 class 名称的元素集合。在解决这个问题之前，先简要了解下 getElementsByClassName 方法的用法。

getElementsByClassName 方法

document.getElementsByClassName(classname)

该方法返回一个包含文档对象中所有指定类名的元素的 NodeList 集合。我们可以像使用数组一样使用它，比如访问 NodeList 中某个元素：

var elements = document.getElementsByClassName('my-class');
console.log(elements[0]);

IE浏览器不支持 getElementsByClassName

IE浏览器不支持 getElementsByClassName 方法源于它在这类浏览器中没有被实现。一种解决方式是通过将类名转换为带有特定规则的 CSS 选择器，然后使用 querySelectorAll 方法来获取元素集合。

将类名转换为带有特定规则的 CSS 选择器

将类名转换为带有特定规则的 CSS 选择器需要使用正则表达式或其他字符串处理技巧。

function toSelector(className) {
  // 如果类名包含空格，按空格分割并添加 '.' 前缀
  if (/\s/.test(className)) {
    return '.' + className.split(/\s+/).join('.');
  }
  // 否则直接添加 '.' 前缀
  return '.' + className;
}

使用 querySelectorAll 方法

使用转换后的 CSS 选择器，调用 querySelectorAll 方法来获取元素集合。

var elements = document.querySelectorAll(toSelector('my-class'));
console.log(elements[0]);

示例

以下是两个示例，第一个示例演示了如何将类名转换为带有特定规则的 CSS 选择器，第二个示例演示了如何使用 querySelectorAll 方法。

// 示例 1
function toSelector(className) {
  // 如果类名包含空格，按空格分割并添加 '.' 前缀
  if (/\s/.test(className)) {
    return '.' + className.split(/\s+/).join('.');
  }
  // 否则直接添加 '.' 前缀
  return '.' + className;
}

// 示例 2
var elements = document.querySelectorAll(toSelector('my-class'));
console.log(elements[0]);