如何获取DOM元素的第一个类名？寻求标准实现方案

Hey Martin! 你提到直接按空格拆分类名不够规范，这个顾虑完全合理——毕竟手动处理空格容易忽略诸如连续空格、首尾空格这些边缘情况，而且原生DOM其实已经提供了更标准的解决方案。

最优方案：使用原生classList API #

DOM元素的classList属性是标准的DOMTokenList对象，它会自动帮你处理类名的空格分隔、去重等问题，并且以有序列表的形式存储元素的类名。你可以直接通过索引获取第一个类名，这是最规范可靠的方式：

$('selector').click(function() {
  // 直接获取第一个类名
  const firstClass = this.classList[0];
  console.log(firstClass); // 输出 className1
});

为什么这是标准方案？

• classList是W3C规范定义的DOM API，所有现代浏览器（包括Chrome、Firefox、Edge，甚至IE10+）都支持
• 自动处理类名中的多余空格（比如" className1 className2 "这种情况，classList会自动整理成纯净的类名列表）
• 除了获取，还支持添加、移除、切换类名等操作，是操作类名的标准工具

兼容老浏览器的备选方案（如果需要支持IE9及以下） #

如果你必须兼容非常老旧的浏览器，classList不被支持，那可以用jQuery的.attr('class')结合正则来安全拆分，避免手动split的问题：

$('selector').click(function() {
  const classStr = $(this).attr('class');
  // 用正则匹配第一个非空格开头的类名
  const firstClass = classStr ? classStr.match(/^\s*(\S+)/)[1] : '';
  console.log(firstClass);
});

这个正则会跳过开头的所有空格，匹配第一个连续非空格的字符串，比直接split(' ')[0]更稳妥，能处理首尾空格和连续空格的情况。

总的来说，优先推荐使用classList，这是当前操作元素类名的标准方式，既简洁又可靠。

内容的提问来源于stack exchange，提问作者Martin AJ