在原生JavaScript中如何从多类名里获取匹配选择器的正确类名

className属性返回的是元素class属性的完整字符串，会包含所有空格分隔的类名，所以你拿到one two three是符合预期的行为，以下是两种常用的实现方案：

方案1：提前抽离目标类名为变量复用（最推荐） #

你在编写选择器时本身就明确要匹配的类是one，直接把类名抽成公共变量复用即可，避免重复硬编码：

// 提前定义要匹配的类名
const targetClass = 'one';
const parent = document.querySelector(`.${targetClass}`);
const correctClass = targetClass;
console.log(correctClass); // 输出 one

方案2：用classList API校验取值 #

如果你需要从元素的类名列表中确认目标类是否存在再取值，可以用内置的classList接口：

const parent = document.querySelector(".one");
let correctClass = '';
if (parent.classList.contains('one')) {
  correctClass = 'one';
}
console.log(correctClass); // 输出 one

如果是动态生成选择器的场景，你也可以通过遍历匹配逻辑筛选对应类名：

const matchClasses = ['one', 'other', 'test'];
const parent = document.querySelector(".one");
const correctClass = matchClasses.find(cls => parent.classList.contains(cls));
console.log(correctClass); // 输出 one

内容的提问来源于stack exchange，提问作者Ren Jitsm