如何在JavaScript中从多类名元素中获取指定类名

方法1：利用classList（推荐） #

DOM元素的classList属性是专门用于操作类名的API，它返回一个DOMTokenList对象，可以直接遍历或筛选目标类名：

let check1 = document.querySelectorAll('.container input');
check1.forEach((elem)=>{
    elem.addEventListener('click',()=>{
        let boxes = document.querySelectorAll('.boxes');
        boxes.forEach((ele)=>{
            // 精确匹配名为"size"的类
            const sizeClass = [...ele.classList].find(cls => cls === 'size');
            // 如果你的size类是带前缀的（比如size-small、size-large），改成下面的判断：
            // const sizeClass = [...ele.classList].find(cls => cls.startsWith('size'));
            console.log(sizeClass);
        })               
    })
})

方法2：分割类名字符串处理 #

如果要基于getAttribute("class")返回的字符串处理，可以将其分割为数组后筛选：

let check1 = document.querySelectorAll('.container input');
check1.forEach((elem)=>{
    elem.addEventListener('click',()=>{
        let boxes = document.querySelectorAll('.boxes');
        boxes.forEach((ele)=>{
            const classStr = ele.getAttribute("class");
            // 用正则分割多个空格，避免连续空格导致的空元素
            const classArr = classStr.split(/\s+/);
            // 筛选目标类名
            const sizeClass = classArr.find(cls => cls === 'size');
            console.log(sizeClass);
        })               
    })
})

注意：优先使用classList方法，它会自动处理类名中的重复项、多余空格等问题，比手动分割字符串更健壮。

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