Javascript按类获取元素

在Javascript中，通过类名获取元素是一种常见的操作，它可以帮助我们快速地获得一组元素并对它们进行一系列的操作。在本文中，我们将介绍如何使用Javascript按类获取元素。

使用getElementsByClassName方法

我们可以使用Document对象的getElementsByClassName方法来获取指定类名的元素，这个方法返回的是一个元素数组，我们可以对这个数组进行遍历和操作。

// 获取所有class为"foo"的元素
var elements = document.getElementsByClassName("foo");
// 遍历元素数组
for (var i = 0; i < elements.length; i++) {
  // 对每个元素进行操作
  elements[i].style.backgroundColor = "red";
}

以上代码会将所有class为"foo"的元素的背景色变为红色。

兼容性问题

需要注意的是，getElementsByClassName方法并不是所有浏览器都支持的，尤其是IE浏览器的早期版本，所以在实际开发中，我们需要进行一些兼容性处理。

一个常见的解决方法是使用自定义的函数来替代getElementsByClassName方法，例如：

// 自定义的按类名获取元素函数
function getElementsByClassName(className) {
  var elements = document.getElementsByTagName("*");
  var result = [];
  for (var i = 0; i < elements.length; i++) {
    if (elements[i].className == className) {
      result.push(elements[i]);
    }
  }
  return result;
}

// 使用自定义函数获取所有class为"foo"的元素
var elements = getElementsByClassName("foo");
// ...

结语

通过getElementsByClassName方法或自定义函数可以快速地获取指定类名的元素，并对它们进行一系列的操作。在实际开发中，我们需要注意兼容性问题，并使用相应的解决方法来处理。