[JavaScript] element.classList - 특정 엘리먼트의 클래스 속성 제어하기

javascript로 엘리먼트의 접근하여 특정 클래스를 제어하는 방법에 대해 알아보자.

▷ 구문

const elementClasses = element.classList;

classList자체는 엘리먼트의 클래스 목록에 접근하는 방식인데, 사실상 클래스 목록을 가져오는 역할만 하고 그 안에 내장되어있는 메서드를 통해 해당 엘리먼트의 클래스를 제어하는 것이다.

Element.classList의 주요 메서드는 다음과 같다.

add(String [, String [, ...]]) : 지정한 클래스 값을 추가하며(여러개 동시 삽입 가능), 만약 추가하려는 클래스가 엘리번트의 class 속성에 이미 존재한다면 무시한다.
remove(String [, String [, ...]]) : 지정한 클래스 값을 제거하며(여러개 동시 제거 가능), 만약 제거하려는 클래스가 엘리번트의 class 속성에 이미 존재한다면 무시한다.
item(Number) : classList 콜렉션의 인덱스를 이용하여 클래스 값을 반환한다.
toggle(String [, force]) : 첫번째 인수만 사용할때는 해당 클래스 값을 토글링한다. 즉, 클래스가 존재한다면 제거하고 false를 반환하며, 존재하지 않으면 클래스를 추가하고 true를 반환한다.두번째 인수가 있을 때에는 두번째 인수가 true일 경우 클래스를 추가하고, false일 경우 제거한다.
contains(String) : 지정한 클래스 값이 존재하는지 확인한다.
replace(oldClass, newClass) : 존재하는 클래스(oldClass)를 새로운 클래스(newClass)로 교체한다.

▷ 예제 1) classList 사용법

<!doctype html>
<html lang="ko">
  <head>
    <script src="./test.js"></script>
    <title>mineItRecord</title>
  </head>
  <body>
    <div class="dv">div-1</div>
    <div id="wrap" class="wrap sp"></div>
  </body>
</html>

const elem = document.querySelector('#wrap');

elem.classList; // DOMTokenList(2) ['wrap', 'sp', value: 'wrap sp']

// single add, remove
elem.classList.remove('sp');
elem.classList.add('mine');
elem.outerHTML; // '<div id="wrap" class="wrap mine"></div>'

// item
elem.classList.item(0); // 'wrap'
elem.classList.item(1); // 'mine'
elem.classList.item(2); // null

// toggle
elem.classList.toggle('mine');
elem.classList.toggle('mine', true);
elem.classList.toggle('mine', false);
elem.outerHTML; // '<div id="wrap" class="wrap"></div>'

// contains
elem.classList.contains('mine'); // false
elem.classList.contains('wrap'); // true

// replace
elem.classList.replace('wrap', 'mine');
elem.outerHTML; // '<div id="wrap" class="mine"></div>'

참고 : https://developer.mozilla.org/ko/docs/Web/API/Element/classList

Element.classList - Web API | MDN

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

developer.mozilla.org