JavaScriptのセレクタ取得で、複数要素を否定する

セレクタ取得で複数否定するには

まずは１つを否定する

const elm = document.querySelectorAll('.class:not(.notClass)');

:not(否定する要素)で否定する要素を指定する。

気になる複数否定は

const elm = document.querySelectorAll('.class:not(.notClass01):not(.notClass02")');

:not(否定する要素)を複数続ける。
つまり、:not(否定する要素):not(否定する要素)でOK。
意外とシンプルなやり方だった。

サンプルコード

<!-- HTML -->
<p class="a"></p>
<p class="a b"></p>
<p class="a c"></p>

<script>
    const all = document.querySelectorAll('.a');
    const all_notB = document.querySelectorAll('.a:not(.b)');
    const all_notBC = document.querySelectorAll('.a:not(.b):not(.c)');
    console.log(all); // NodeList(3) [p.a, p.a.b, p.a.c]
    console.log(all_notB); // NodeList(2) [p.a, p.a.c]
    console.log(all_notBC); // NodeList [p.a]
</script>

そんなに使う場所もなければ、使わずに済むことが１番かもしれない。