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

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

例如，我有这个列表:

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

我通过以下方式选择完成的任务:

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

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

153603 次浏览
小开

选择没有 completed或 selected类的 <li>:

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

小提琴

Http://jsfiddle.net/z8djf/

小开

您可以尝试 :not()选择器

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

Http://jsfiddle.net/um3j5/

小开

尝试获取父母子女的数组:

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

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

小开
最佳答案

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

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

:not(*selector*)选择器也接受逗号(querySelectorAll()也是) https://developer.mozilla.org/en-US/docs/Web/CSS/:not#syntax:

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>


提交答案