[javascript] 특정 클래스가없는 요소를 선택하는 방법

Program / 글쓴이

jQuery가 아닌 JavaScript를 사용하여 특정 클래스가없는 요소를 선택하는 방법이 궁금합니다.

예를 들어 다음 목록이 있습니다.

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

다음과 같이 완료된 작업을 선택합니다.

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

하지만 그런 클래스가없는 목록 항목을 선택하는 방법을 모르겠습니다.

답변

두 번째 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>

스 니펫 확장

답변

선택하려면 <li>되지 않았 음 completed이나 selected클래스를 :

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/

답변

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

답변

대신 부모의 자식 배열을 가져 오십시오.

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

그런 다음 필요에 따라 반복 / 검색합니다.

답변