Is there a way in Javascript to select elements matching a boolean expression of multiple class names?

Question

Say I have multiple elements on a page and each element has one or more class names, eg:

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

Is there a way to select, for example, all elements that have

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

?

Answer 1

You could use css selectors with the querySelectorAll function.

(A1 OR A2) AND (B1 OR B2) is the same as saying (A1 AND B1) OR (A1 AND B2) OR (A2 AND B1) OR (A2 AND B2) which we can express using css selectors like this .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>

• More on CSS selectors: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors
• More on querySelectorAll:https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll