如何选择没有特定类的元素答案

【问题标题】：How to Select Element That Does Not have Specific Class如何选择没有特定类的元素
【发布时间】：2014-02-23 23:02:35
【问题描述】：

我想知道如何使用 JavaScript 而不是 jQuery 选择没有特定类的元素。

例如，我有这个列表：

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

然后我通过以下方式选择已完成的任务：

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

但是我不确定如何选择没有这些类的列表项。

【问题讨论】：

标签： javascript html class

【解决方案1】：

这将选择第二个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>

【讨论】：

【解决方案2】：

选择没有completed 和selected 类的<li>：

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

小提琴

http://jsfiddle.net/Z8djF/

【讨论】：

如何do the reverse ：即选择同时具有completed和selectedclass的所有元素？
@user2284570 只写两个没有空格的类：li.completed.selected -> 这将匹配所有具有completed 和selected 类的li 元素

【解决方案3】：

你可以试试:not()选择器

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

http://jsfiddle.net/UM3j5/

【讨论】：

【解决方案4】：

document.querySelectorAll('[wf-body=details] input:not(.switch):not(.btn)').forEach(function(e){
    // do whatever you want. with 'e' as element :P
});

【讨论】：

【解决方案5】：

:not(*selector*) 选择器也接受逗号（querySelectorAll() 也是如此）：

let plainElements = document.querySelectorAll( ':not( .completed, .in-progress ) ');
plainElements.forEach( ( item ) => { item.style.color = 'red'; } );

li { color: green; }

<ul id="tasks">
  <li class="completed selected">Task 1</li>
  <li>Task 2</li>
  <li class="in-progress">Task 3</li>
</ul>

【讨论】：

【解决方案6】：

尝试获取父母的孩子的数组：

var completeTask = document.querySelector("#tasks").childNodes;

然后根据需要循环/搜索它们。

【讨论】：