javascript - Javascript 有没有办法选择与多个类名的 bool 表达式匹配的元素？

Question

假设我在一个页面上有多个元素，每个元素都有一个或多个类名，例如:

<div class="A1 A2 B1">…</div>
<div class="A2 C3">…</div>
<div class="B2 C3">…</div>
etc.

有没有办法选择，例如，所有具有

的元素

class = (A1 OR A2) AND (B1 OR B2) 

？

Answer 1

您可以将 css 选择器与 querySelectorAll 函数一起使用。

(A1 OR A2) AND (B1 OR B2) 与 (A1 AND B1) OR (A1 AND B2) OR (A2 AND B1) OR (A2 AND B2) 我们可以使用 css 选择器来表达，例如 .A1.B1, .A1.B2, .A2.B1, .A2.B2。

// (A1 OR A2) AND (B1 OR B2)
const selector = '.A1.B1, .A1.B2, .A2.B1, .A2.B2';

const $elems = document.querySelectorAll(selector);

$elems.forEach($el => console.log($el));

<div class="A1 A2 B1"></div>
<div class="A1 B1"></div>
<div class="A1 B2"></div>
<div class="A2 B1"></div>
<div class="A2 B2"></div>
<div class="A2 C3"></div>
<div class="B2 C3"></div>

• 有关 CSS 选择器的更多信息:https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors
• 有关 querySelectorAll 的更多信息:https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll