[解決済み] 特定のクラスを持たない要素を選択する方法

質問

jQueryではなく、JavaScriptで特定のクラスを持たない要素を選択する方法を教えてください。

例えば、こんなリストがあります。

<ul id="tasks">
  <li class="completed selected">One Task</li>
  <li>Two Task</li>
</ul>

で、完了したタスクを選択します。

var completeTask = document.querySelector("li.completed.selected");

しかし、そうなると、それらのクラスを持っていないリストアイテムを選択する方法がよくわかりません。

どのように解決するのですか？

これは、2番目の LI 要素を選択します。

document.querySelector("li:not([class])")

または

document.querySelector("li:not(.completed):not(.selected)")

例

// select li which doesn't have a 'class' attribute...
console.log(document.querySelector("li:not([class])"))

// select li which doesn't have a '.completed' and a '.selected' class...
console.log(document.querySelector("li:not(.completed):not(.selected)"))

 <ul id="tasks">
    <li class="completed selected">One Task</li>
    <li>Two Task</li>
  </ul>