How to exclude specific class names in querySelectorAll()?
JavascriptJavascript 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"]`)