在前端开发中，我们经常需要根据 HTML 元素的类名（class）来获取元素并操作它们。但是如果一个元素具有多个类名，该如何获取它呢？本文将介绍几种方法来解决这个问题。
方法一：使用 querySelectorAll()
querySelectorAll() 方法可以接收 CSS 选择器作为参数，并返回符合条件的所有元素。因此我们可以利用 CSS 的多类选择器来获取具有多个类的元素。例如，如果我们想要获取同时具有 "class1" 和 "class2" 类名的元素，可以这样写：
const elements = document.querySelectorAll(".class1.class2");这里使用了 "." 符号来表示类名，中间没有空格。
方法二：遍历元素并判断类名
另一种方法是遍历页面上的所有元素，然后判断每个元素是否具有目标类名。这种方法虽然看起来比较麻烦，但是对于 DOM 结构比较简单的页面效率还是很高的。示例代码如下：
-- -------------------- ---- -------
-------- ---------------------------------- -
----- -------- - ---
----- ----------- - -----------------------------------
--- ---- - - -- - - ------------------- ---- -
----- ------- - ---------------
----- ----------------- - ------------------------- ---
-- ----------------------------------------- -- - -- ---------------------------------------- -- -- -
-----------------------
-
-
------ ---------
-
-- ----
----- -------- - --------------------------------- -----------这里我们定义了一个名为 getElementsByClassName() 的函数，它接收一个字符串数组作为参数，其中包含目标类名。函数返回符合条件的所有元素。
方法三：使用 ES6 的新特性
如果你使用的是较新版本的 JavaScript，那么可以使用一些新特性来简化代码。例如，可以使用 Array.prototype.filter() 方法和箭头函数来获取具有多个类的元素。示例代码如下：
const elements = [...document.querySelectorAll("*")].filter(element => {
const classNames = element.className.split(" ");
return classNames.includes("class1") && classNames.includes("class2");
});这里我们使用了扩展运算符（"..."）将 NodeList 对象转换为数组，然后使用 filter() 方法筛选符合条件的元素。箭头函数中的代码判断每个元素是否同时包含目标类名。
以上就是三种获取具有多个类的元素的方法，根据实际情况选择适合自己的方法即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13102