[JS 개념] Element.classList

Element.classList

: 엘리먼트의 클래스 속성의 컬렉션인 활성 DOMTokenList를 반환하는 읽기 전용 프로퍼티이다.

=> 엘리먼트의 class 속성들을 다루는 듯

const elementClasses = elementNodeReference.classList;

- add() , remove() 메서드를 이용하여 변형할 수 있다

 

<메서드>

1. add() : 지정한 클래스 값을 추가

2. remove() : 지정한 클래스 값을 제거

3. item() : 클래스 값을 반환

4. toggle() : 클래스가 존재하면 제거하고  false, 존재하지 않으면 클래스를 추가하고  true (0과 1이 반복되는 행위)

5. contains() : class 속서에 존재하는지 확인

6. replace() :클래스 교체

*사용법은 참조링크 참고

 

<예시1>

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

 

 

(참조)

https://developer.mozilla.org/ko/docs/Web/API/Element/classListhttps://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

---

1st 기록 : 23.05.08(월)

2nd 기록 : 23.05.10(수)