The Element.classList is a read-only property that returns a live DOMTokenList collection of the class attributes of the element. This can then be used to manipulate the class list.

Using classList is a convenient alternative to accessing an element’s list of classes as a space-delimited string via element.className.

Syntax

const elementClasses = elementNodeReference.classList;

Example

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);

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");

When controlling HTML with Javascript, you must be aware of the division of roles with CSS. Since it is right to control the design part of the site screen with CSS, the correct way is to indirectly control CSS while changing the HTML tag ID or class name with Javascript when giving design interaction.

Javascript 로 HTML을 컨트롤할 때 CSS와의 역할분담에 대해 인지하고 있어야 한다. 사이트 화면의 디자인 적인 부분은 CSS로 컨트롤 하는 것이 맞기 때문에 디자인 적인 인터렉션을 줄 때 Javascript로 HTML tag의 ID나 class name을 변경시켜주면서 간접적으로 CSS를 컨트롤해 주는 것이 올바른 방법이다.

It is the properties of classList that are used in this situation.

이러한 상황에서 사용하는 것이 바로 classList의 property들이다.

DOM Javascript html