在 JavaScript 中高效地检查 DOM 元素是否包含特定类，最常用和高效的方法是使用原生的 classList.contains() 方法。这个方法专门用于检查一个元素的类名列表中是否包含某个类，并且它是非常快速的，因为它是由浏览器底层实现的。

---

1. 使用 classList.contains() 方法

1.1 基本用法

const element = document.getElementById('myElement');

if (element.classList.contains('myClass')) {
  console.log('Element contains the class');
} else {
  console.log('Element does not contain the class');
}

• element.classList 返回一个 DOMTokenList 对象，它是一个类名的集合，提供了许多方法来操作类名。
• contains() 方法会检查该元素的类名列表中是否存在指定的类名，如果存在返回 true，否则返回 false。

1.2 优点

• 性能高效：classList.contains() 是原生实现，浏览器通常会进行优化，因此它的执行效率非常高。
• 简单易用：这是一种简洁且易读的方法，适用于检查单个类。

---

2. 其他方法：className 或 getAttribute()（不推荐）

虽然 classList.contains() 是最推荐的方式，但你还可以使用 className 或 getAttribute() 来手动检查类名。这里介绍一下这些方法，虽然它们不如 classList.contains() 高效或简洁。

2.1 使用 className 属性（不推荐）

const element = document.getElementById('myElement');

if (element.className.split(' ').includes('myClass')) {
  console.log('Element contains the class');
} else {
  console.log('Element does not contain the class');
}

• className 返回的是一个包含所有类名的字符串。
• 我们使用 split(' ') 将类名字符串分割成一个数组，然后使用 includes() 方法检查数组中是否包含目标类名。
• 这个方法的性能相对较差，尤其是当元素有大量类名时，因为每次都要分割字符串并进行数组查找。

2.2 使用 getAttribute('class')（不推荐）

const element = document.getElementById('myElement');

if (element.getAttribute('class').split(' ').includes('myClass')) {
  console.log('Element contains the class');
} else {
  console.log('Element does not contain the class');
}

• getAttribute('class') 返回元素的 class 属性值（即类名的字符串），然后像上面的例子一样进行分割和检查。
• 这种方法在现代浏览器中不常用，因为 classList 提供了更方便且高效的 API。

---

3. 性能对比

• classList.contains()：浏览器原生支持，执行效率高，适用于大部分情况。
• className.split(' ').includes() 或 getAttribute('class')：这些方法需要解析字符串，相对来说效率较低，尤其是当类名字符串比较长或需要频繁检查时。

---

结论

• 最推荐的做法是使用 classList.contains()，这是最现代、简洁且性能最佳的方法。
• 避免使用 className.split(' ').includes() 或 getAttribute('class')，因为它们会引入不必要的性能开销，特别是在大量 DOM 元素上进行类名检查时。

通过 classList.contains()，你可以高效且简便地检查元素是否包含特定类。