DOMTokenList

인터페이스 DOMTokenList는 공백으로 구분된 토큰 세트를 나타냅니다. 이러한 집합은 Element.classListor HTMLLinkElement.relList및 기타 여러 가지에 의해 반환됩니다.

DOMTokenList

---

요소.classList: 요소가 가지고 있는 클래스를 배열로 반환
요소.classList.remove("클래스명") : 요소의 특정 클래스 제거
요소.classList.add("클래스명") : 요소의 특정 클래스 추가
요소.classList.toggle("클래스명") : 클래스가 있으면 제거 없으면 추가

---

DOMTokenList.add()

add()인터페이스의 메서드는 주어진 DOMTokenList토큰을 목록에 추가하고 이미 있는 토큰은 생략합니다.

먼저 HTML

<span class="a b c"></span>

이제 자바스크립트

const span = document.querySelector("span");
const classes = span.classList;
classes.add("d");
span.textContent = classes;

출력은 다음과 같습니다.

a b c d

여러 토큰을 추가할 수도 있습니다.

span.classList.add("d", "e", "f");

---

DOMTokenList.remove()

remove()인터페이스 의 메서드는 목록 에서 DOMTokenList지정된 토큰을 제거합니다.

먼저 HTML

<div id="ab" class="a b c"></div>
<div id="a" class="a b c"></div>

이제 자바스크립트

const span = document.getElementById("ab");
const classes = span.classList;
classes.remove("c");
span.textContent = classes;

span.classList.remove("c");

한 번에 여러 클래스를 제거하려면 여러 토큰을 제공할 수 있습니다. 토큰을 제공하는 순서는 목록에 나타나는 순서와 일치하지 않아도 됩니다.

const span2 = document.getElementById("a");
const classes2 = span2.classList;
classes2.remove("c", "b");
span2.textContent = classes2;

span2.classList.remove("c", "b");

출력은 다음과 같습니다.
a b
a

---

DOMTokenList.replace()

replace()인터페이스 의 메서드는 기존 DOMTokenList토큰을 새 토큰으로 바꿉니다. 첫 번째 토큰이 없으면 토큰 목록에 새 토큰을 추가하지 않고 즉시 replace()반환합니다 .false

replace(oldToken, newToken);