通过类名获取元素的角度 - Javascript

在 Javascript 中，通过给 DOM 元素添加 class 类名的方式来实现样式的添加和控制已经是司空见惯的操作。然而，在需要操作某些具有相同 class 类名的元素时，如何查找这些元素并针对其进行操作就成为了一个常见的问题。这时，我们就需要通过类名来获取元素。

1. getElementsByClassName

在原生 JS 中可以使用 getElementsByClassName 方法来获取所有具有相同 class 的元素。该方法返回一个类数组，包含了所有具有该类名的元素。

let elems = document.getElementsByClassName('classname');

其中 classname 是我们需要获取的元素的类名。

需要注意的是，这个方法返回的是一个 HTMLCollection 对象，而不是一个真正的数组。虽然可以使用 Array.from 方法将其转化为真正的数组，但是我们仍然需要小心遍历该对象内部的元素。

2. querySelectorAll

除了 getElementsByClassName，还有一种相当常用的方式是使用 querySelectorAll。该方法可以接受一个 CSS 选择器，返回符合该选择器的所有元素，其中类名以点号开头。

let elems = document.querySelectorAll('.classname');

同样，classname 在这里是我们需要获取的元素的类名。

需要注意的是，querySelectorAll 也返回一个 NodeList 对象，因此操作方法与 HTMLCollection 类似。

总结

以上就是通过类名获取元素的两种主要方式。需要注意的是，在使用这些方法时，它们的返回值均为类数组对象，并不是真正的数组，因此在进行遍历时，需要格外注意其特性，并根据需要进行转化。