Как выбрать элемент, который не имеет определенного класса

Мне интересно, как выбрать элемент, который не имеет определенного класса, используя JavaScript, а не jQuery.

Например, у меня есть этот список:

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

и я выбираю выполненное задание по:

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

Но тогда я не уверен, как выбрать элемент списка, который не имеет этих классов.

Ответ 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

Чтобы выбрать <li>, у которого нет completed и selected class:

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

Fiddle

http://jsfiddle.net/Z8djF/

Ответ 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

Попробуйте получить массив родительских детей:

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

Затем выполните петлю/выполните поиск по мере необходимости.