JS按类获取元素 - JavaScript

在JavaScript中，我们可以通过class名称获取对应的元素。这对于操作DOM元素来说非常有用，因为在HTML中我们经常会使用class来为元素赋予样式和标识。

下面是几种常见的方法来通过class获取元素。

使用querySelectorAll方法

// 获取所有class为foo的元素
var elements = document.querySelectorAll('.foo');

这个方法会返回一个NodeList对象，它类似于一个数组，包含所有匹配的元素。

需要注意的是，querySelectorAll方法只支持IE8及以上的浏览器。如果需要支持更旧的浏览器，可以使用以下方法。

使用getElementsByClassName方法

// 获取所有class为foo的元素
var elements = document.getElementsByClassName('foo');

这个方法也会返回一个类似数组的HTMLCollection对象，包含所有匹配的元素。

需要注意的是，getElementsByClassName方法不支持IE8及以下的浏览器。如果需要支持更旧的浏览器，可以使用以下方法。

使用getElementsByTagName方法结合循环

// 获取所有class为foo的元素
var elements = document.getElementsByTagName('*');

var matches = [];

for (var i = 0; i < elements.length; i++) {
  if (elements[i].className.indexOf('foo') !== -1) {
    matches.push(elements[i]);
  }
}

这个方法会通过遍历所有元素，并检查它们的class名称是否匹配来获取所有匹配的元素。需要注意的是，该方法性能较低，因为它需要遍历所有元素。

总结

以上三种方法都可以通过class名称获取元素，但每种方法都有不同的优缺点。推荐使用querySelectorAll方法，因为它性能更好且更易读。如果需要支持更旧的浏览器，可以考虑使用getElementsByClassName方法或getElementsByTagName方法结合循环。