时间戳

首页 > 解决方案 > 如何在 JavaScript 中使用 CSS 选择器来查找包含特定类的元素？

javascript - 如何在 JavaScript 中使用 CSS 选择器来查找包含特定类的元素？

问题描述

给一个元素多个类的正确方法是在它们之间放置空格。正确的？

那么为什么选择器[class=CLASSNAME]不工作，除非它是唯一的类？

[class^=CLASSNAME]如果班级是第一个班级，则有效。

但是如何选择所有具有给定类的元素，而不考虑它们的类的数量或顺序？

我想选择所有带有 class 的元素foo-bar。但是下面的代码只选择了第一个。

const selector = '[class=foo-bar]';
const divs = document.querySelectorAll(selector);
console.log([...divs].map(div => div.textContent));
<div class="foo-bar">foo</div>
<div class="foo-bar baz">bar</div>
<div class="baz foo-bar">baz</div>

标签： javascripthtmlcss-selectors

解决方案

当您使用属性选择器时，它会将整个属性值作为普通字符串进行匹配。它没有class特别对待属性，所以它不被认为是一个可以单独匹配的类列表。

就像在 CSS 中一样，用于.classname匹配列表中的任何类。

const selector = '.foo-bar';
const divs = document.querySelectorAll(selector);
console.log([...divs].map(div => div.textContent.trim()));
<div class="foo-bar">foo</div>
<div class="foo-bar baz">bar</div>
<div class="baz foo-bar">baz</div>

推荐阅读