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


90

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

例如,我有以下列表:

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

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

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

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

Answers:


165

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


17

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

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

小提琴

http://jsfiddle.net/Z8djF/


如何反过来做:即选择同时具有所有元素completedselected类?
user2284570

@ user2284570只需编写两个没有空格的类:li.completed.selected->这将匹配所有li具有completedANDselected类的元素
BeNdErR



1

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

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

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.