如何通过类名获取元素JavaScript

在 Web 开发中，我们经常需要通过类名来获取元素，这是因为 HTML 元素可以有多个类名，类名作为相同类型的元素的标识符。在 JavaScript 中，我们可以使用一些方法来获取具有特定类名的元素。

1. document.getElementsByClassName()

document.getElementsByClassName() 方法可以获取文档中指定类名的所有元素。该方法返回一个包含所有匹配元素的 HTMLCollection 对象。

let elements = document.getElementsByClassName("my-class");

可以使用类似数组的方式通过索引来访问每个元素：

let firstElement = elements[0];

请注意，getElementsByClassName() 方法返回的不是数组，而是一个 HTMLCollection 对象。如果需要对该对象进行迭代或使用其他数组方法，需要将其转换为数组：

let elementsArray = Array.from(elements);

2. document.querySelector()

document.querySelector() 方法可以获取文档中第一个指定类名的元素。该方法将返回匹配的第一个元素或 null（如果没有找到匹配项）。

let element = document.querySelector(".my-class");

3. document.querySelectorAll()

document.querySelectorAll() 方法可以获取文档中所有指定类名的元素。该方法将返回一个包含所有匹配元素的 NodeList 对象。

let elements = document.querySelectorAll(".my-class");

可以使用类似数组的方式通过索引来访问每个元素：

let firstElement = elements[0];

请注意，querySelectorAll() 方法返回的不是数组，而是一个 NodeList 对象。如果需要对该对象进行迭代或使用其他数组方法，需要将其转换为数组：

let elementsArray = Array.from(elements);

总结

以上是通过类名获取元素的三种方法，每种方法都有其优缺点。getElementsByClassName() 是最老的方法，但是它返回的是一个 HTMLCollection 对象。querySelector() 返回匹配的第一个元素，而 querySelectorAll() 返回匹配的所有元素。因此，在使用这些方法之前，需要考虑你所需的结果并选择最适合你的需求的方法。