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

时间:2014-02-23 23:02:36

标签: javascript html class

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

例如,我有这个清单:

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

我选择完成的任务:

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

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

5 个答案:

答案 0 :(得分:101)

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

答案 1 :(得分:15)

选择没有<li>completed类的selected

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

<强>小提琴

http://jsfiddle.net/Z8djF/

答案 2 :(得分:9)

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

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

http://jsfiddle.net/UM3j5/

答案 3 :(得分:2)

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

答案 4 :(得分:1)

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

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

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