How to exclude specific class names in querySelectorAll()?

Javascript

Javascript Problem Overview


How can I exclude tag elements that have a specific class name?

<span class="test" />
<span class="test asd" />

document.querySelectorAll('span.test'); //how to exclude all spans with "asd" as class name?

Javascript Solutions


Solution 1 - Javascript

Use :not CSS pseudo-class:

document.querySelectorAll('span.test:not(.asd)');

Solution 2 - Javascript

Use the CSS's negation pseudo-selector, :not():

document.querySelectorAll('span.test:not(.asd)');

> The negation pseudo-class, :not(X), is a functional notation taking a simple selector (excluding the negation pseudo-class itself) as an argument. It represents an element that is not represented by its argument.

Solution 3 - Javascript

Element by tagName and ignore or exclude element that have a specific class:

document.querySelectorAll(`svg,div:not([class*="background"]`)

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionmembersoundView Question on Stackoverflow
Solution 1 - JavascriptVisioNView Answer on Stackoverflow
Solution 2 - JavascriptJames DonnellyView Answer on Stackoverflow
Solution 3 - JavascriptNazakat AliView Answer on Stackoverflow