JavaScript Element :classList

 

Element :classLists는 요소의 클래스 속성에 대한 라이브 DOMTokenList 컬렉션을 반환하는 읽기 전용 속성이다.

classList를 사용하는 것은 element.className을 통해 공백으로 구분된 문자열로 요소의 클래스 목록에 액세스하는 것보다 편리한 대안이다.

 

 

 

 

클래스 속성이 설정되지 않았거나 비어있으면 빈 DOMTokenList, 즉 길이 속성이 0인 DOMTokenList를 반환한다,

classList 속성 자체는 읽기 전용이지만 add(), remove(), replace() 그리고 toggle() 메서드를 사용하여 연결된 DOMTokenList를 수정할 수 있다.

classList.contains() 메서드를 사용하여 요소에 지정된 클래스가 포함되어 있는지 여부를 테스트 할 수 있다.

 

const div = document.createElement("div");
div.className = "foo";

// our starting state: <div class="foo"></div>
console.log(div.outerHTML);

// use the classList API to remove and add classes
div.classList.remove("foo");
div.classList.add("anotherclass");

// <div class="anotherclass"></div>
console.log(div.outerHTML);

// if visible is set remove it, otherwise add it
div.classList.toggle("visible");

// add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10);

// false
console.log(div.classList.contains("foo"));

// add or remove multiple classes
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");

// add or remove multiple classes using spread syntax
const cls = ["foo", "bar"];
div.classList.add(...cls);
div.classList.remove(...cls);

// replace class "foo" with class "bar"
div.classList.replace("foo", "bar");