如何在 JavaScript 中使用 CSS 選擇器來查找包含特定類的元素？

Question

給一個元素多個類的正確方法是簡單地在它們之間放置空格。 對？

那么為什么選擇器[class=CLASSNAME]不起作用，除非它是唯一的類？

[class^=CLASSNAME]如果類是第一個則有效。

但是如何選擇具有給定類的所有元素，而不管它們的類的數量或順序如何？

我想選擇類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>

Answer 1

當您使用屬性選擇器時，它會將整個屬性值作為普通字符串進行匹配。 它不會特別對待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>