在开发中使用JavaScript操作DOM时，获取元素的类名是一个基础而常用的操作。类名在CSS中用于定义元素的样式，而在JavaScript中，我们可以通过多种方式来获取和操作这些类名。以下是五种获取元素类名的原生JavaScript方法，让你轻松掌握如何在不同的场景下使用它们。
方法一：使用 .className 属性
这是最简单直接的方式，通过元素的 .className 属性可以直接获取到元素的类名。
// 获取元素
var element = document.getElementById('myElement');
// 获取类名
var className = element.className;
console.log(className); // 输出：my-class another-class
方法二：使用 getElementsByClassName 方法
getElementsByClassName 方法可以返回一个HTMLCollection，其中包含了所有具有指定类名的元素。然后你可以通过索引访问这些元素并获取它们的类名。
// 获取所有具有指定类名的元素
var elements = document.getElementsByClassName('my-class');
// 获取第一个元素的类名
var firstElementClassName = elements[0].className;
console.log(firstElementClassName); // 输出：my-class another-class
方法三：使用 querySelector 方法
querySelector 方法允许你使用CSS选择器来选择元素。通过这个方法，你可以获取到单个元素的类名。
// 获取第一个匹配选择器的元素
var element = document.querySelector('.my-class');
// 获取类名
var className = element.className;
console.log(className); // 输出：my-class another-class
方法四：使用 querySelectorAll 方法
与 querySelector 类似，querySelectorAll 方法可以返回所有匹配的元素列表。你可以通过访问列表中的元素来获取它们的类名。
// 获取所有匹配选择器的元素
var elements = document.querySelectorAll('.my-class');
// 获取第一个元素的类名
var firstElementClassName = elements[0].className;
console.log(firstElementClassName); // 输出：my-class another-class
方法五：使用 getComputedStyle 方法
getComputedStyle 方法可以获取元素最终计算后的样式值，包括类名。这在处理CSS样式计算时非常有用。
// 获取元素
var element = document.getElementById('myElement');
// 获取最终计算后的类名
var style = window.getComputedStyle(element);
var className = style.className;
console.log(className); // 输出：my-class another-class
通过以上五种方法，你可以灵活地在不同的场景下获取元素的类名。掌握这些方法不仅能够帮助你更好地进行DOM操作，还能够让你在处理复杂的JavaScript应用时更加得心应手。