选择具有特定属性的标签（仅）[重复]

Question

此问题已经在这里有了答案：

• Exclusive CSS selector3个答案

我在以下文件中具有以下结构：

...
...
<span class="clblue redcl turbocl">something</span>
<span class="clblue redcl turbocl">something</span>
<span class="clblue">something</span>
<span class="clblue">something</span>
...
...

[仅在JavaScript中，我想要：document.querySelectorAll("span.clblue")仅提供“ clblue”类的跨度，而不是所有带有“ clblue”的跨度以及其他类。

Answer 1

如果您只想匹配一个类而不是其他类，则可以使用属性选择器：

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

Answer 2

如何过滤出querySelectorAll值？

let items = document.querySelectorAll(".clblue");
let filtered = Array.prototype.filter.call(items, function(node) {
    return node.classList.length === 1;
});

Answer 3

使用CSS仅选择一个类名，

span[^="clblue"][$="clblue"] { ... }

然后我们用JS选择它，

let x = document.querySelectorAll("span[class^=clblue][class$=clblue]"); // NodeList

// x[0], x[1]... x[n]