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

【问题标题】：selecting tag with a specific attribute(only) [duplicate]选择具有特定属性的标签（仅限）[重复]
【发布时间】：2019-10-09 21:45:50
【问题描述】：

我的文档结构如下：

...
...
<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”和其他类的所有跨度。

【问题讨论】：

那么，只选择具有single类且该类为clblue的项目，对吗？
检查:not() CSS 伪类。可用于排除
您知道添加自己的属性是无效代码，对吧？使用data- attributes。

标签： javascript html css dom css-selectors

【解决方案1】：

如果你只想匹配一个类而不是那个类，你可以使用属性选择器：

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

【讨论】：

【解决方案2】：

使用 CSS 只选择一个类名，

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

然后我们用JS选择它，

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

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

【讨论】：

OP 只要求 JavaScript 解决方案。
@Utkanos 任何 JS 解决方案都需要使用 CSS 选择器，因此提供选择器并不是一个错误的解决方案，因为我们以后可以轻松地将其与 querySelector() 集成
这就像说“它目前是一个无法使用的答案，但我们可以对其进行修改以使其正常工作”。我明白你在说什么 - 当然你可以将这个答案（大部分）提供给querySelector，但现在它是一个 CSS 答案，而不是 JS 答案，因此与 OP 的要求不匹配。跨度>
好的 @Utkanos 和问题的所有者。我编辑了我的答案。
否决票已撤回。

【解决方案3】：

过滤掉 querySelectorAll 值怎么样？

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

【讨论】：

这样做有点浪费。 CSS 选择器表达式已经处理了这个问题，不需要糟糕地使用 CSS 选择器表达式，只需对结果进行后修复。
好的，那么在这种情况下你将如何使用 css 选择器呢？ :)
就像the other answer shows。
好吧，我没注意到。另一方面，它的普遍性有点低。它仅适用于跨度，如果作者打算这样做，当然可能会很好。我的解决方案适用于具有给定类的任何元素。
您仍然可以使用 CSS 选择器指定 "[class='clblue']" 将匹配任何元素。同样，您将丢弃 CSS 选择器功能来重新实现它。