如何通过JavaScript仅选中仅含clblue类的span元素

想要用document.querySelectorAll只拿到只有clblue这一个类的<span>，而不是那些带着clblue还加了其他类的元素，这里有两种靠谱的办法：

方法1：精准匹配class属性（简单但有局限） #

如果你的<span>的class属性值就是严格的clblue（没有多余空格、没重复写类名），直接用属性选择器就行：

const onlyClblueSpans = document.querySelectorAll('span[class="clblue"]');

不过要注意，要是元素的class是" clblue "（前后带空格）或者"clblue clblue"（重复写了类名），这个选择器就抓不到了。

方法2：JavaScript过滤（更稳妥） #

先把所有带clblue类的span都选出来，再过滤掉那些还有其他类的，这种方法能应对各种特殊情况：

// 第一步：拿到所有带clblue类的span
const allClblueSpans = document.querySelectorAll('span.clblue');
// 第二步：过滤出仅含clblue这一个类的元素
const onlyClblueSpans = Array.from(allClblueSpans).filter(span => {
  return span.classList.length === 1 && span.classList.contains('clblue');
});

为啥这么写？

• span.classList.length === 1保证这个元素只有一个类
• span.classList.contains('clblue')确认这个唯一的类就是我们要的clblue

不管你的class属性里有没有多余空格、有没有重复写clblue，这个方法都能精准命中目标元素。

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