[javascript] 자바스크립트 classList 사용 방법

참고: https://www.javascripttutorial.net/javascript-dom/javascript-classlist/

이 튜토리얼에서는 javascript classList 속성을 사용하여 element의 class를 사용하는 방법을 보입니다. classList는 element의 읽기전용 속성으로 css class의 현재 값을 반환합니다.

const classes = element.classList;

classList는 DOMTokenList 객체로 element의 class 속성을 보여줍니다. classList가 읽기전용이어도 다양한 메소드를 통해 class 목록을 조작할 수 있습니다.

이제 classList의 인터페이스를 통해 css class를 조작하는 예제를 보겠습니다.

element의 CSS class 목록 가져오기

두개의 클래스 main, red를 가진 div element가 있다고 생각해봅시다.

<div id="content" class="main red">JavaScript classList</div>

다음은 div element의 class 목록을 콘솔에 출력하는 코드입니다.

let div = document.querySelector('#content');

for (let cssClass of div.classList) {
  console.log(cssClass);
}

위 코드는 먼저 querySelector() 메소드를 통해 id가 content인 div element를 가져옵니다. 그다음 element의 classList에 루프를 돌려 각각의 클래스명을 콘솔에 출력합니다.

하나 이상의 class를 추가하기

element의 class 목록에 하나 이상의 css class를 추가하려면 classList의 add() 메소드를 사용하야합니다. 예를 들면 다음은 info class를 id가 content인 div element에 추가하는 코드입니다.

let div = document.querySelector('#content');
div.classList.add('info');

다음의 예제는 element의 class 목록에 여려개의 css class를 추가하는 코드입니다.

let div = document.querySelector('#content');
div.classList.add('info', 'visible', 'block');

element의 class 삭제하기

element의 css class를 삭제하기 위해서는 remove() 메소드를 사용하면 됩니다. 또한 add() 메소드와 마찬가지로 여러개의 클래스명을 한번에 제거할 수도 있습니다.

728x90

// remove only
let div = document.querySelector('#content');
div.classList.remove('visible');

// remove multiple
let div = document.querySelector('#content');
div.classList.remove('block', 'red');

element의 class 교체하기

현재 존재하는 css class를 새로운 것으로 교체하기 위해서는 replace() 메소드를 사용하면 됩니다. 다음의 코드는 현재 존재하는 info class를 warning class로 바꾸는 코드입니다.

let div = document.querySelector('#content');
div.classList.replace('info','warning');

특정 class가 존재하는지 확인하기

element가 특정 class를 가지고있는지 확인하기 위해서는 contains() 메소드를 사용하면됩니다. contain() 메소드는 classList에 특정한 class가 존재하면 true를 반환하고 아니면 flase를 반환합니다.

let div = document.querySelector('#content');
div.classList.contains('warning');

class 토글하기

만일 element의 class 목록에 특정 class명이 들어있다면 toggle() 메소드는 그 class명을 지웁니다. 만약 class 목록에 그 class명이 없다면 toggle() 메소드는 그 class를 element의 class 목록에 추가합니다. 다음의 예제는 toggle() 메소드를 사용해 id가 content인 element에 visible class를 토글하는 코드입니다.

let div = document.querySelector('#content');
div.classList.toggle('visible');

요약

• element의 classList 속성은 element의 현재 css class 목록을 반환합니다.
• add()와 remove() 메소드를 사용해 element의 css class 목록에 추가, 삭제 작업을 할 수 있습니다.
• replace() 메소드는 현재 존재하는 class를 새로운 class로 바꿉니다.
• contains() 메소드는 element의 class 목록에 특정 class가 있는지 확인합니다.
• toggle() 메소드는 class를 토글합니다.