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


90

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

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

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

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

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

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

답변:


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 2016-10-02

@ user2284570은 공백없이 두 클래스를 모두 작성합니다 li.completed.selected.-> 이것은 AND 클래스 li가있는 모든 요소 와 일치합니다completedselected
BeNdErR


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

1

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

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

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

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.