classList

DOM의 클래스 조작은 웹 페이지의 요소에 스타일을 동적으로 추가, 변경, 제거하기 위해 자주 사용됩니다. JavaScript를 통해 이를 구현할 수 있는 주요 방법은 classList 속성을 사용하는 것입니다. **classList**는 요소의 클래스를 조작하기 위한 다양한 메소드를 제공합니다.

classList의 주요 메소드

• add(className): 요소에 클래스를 추가합니다. 이미 존재하는 클래스라면 추가하지 않습니다.
• remove(className): 요소에서 클래스를 제거합니다.
• toggle(className): 클래스가 존재하면 제거하고, 존재하지 않으면 추가합니다. 이 메소드는 클래스의 존재 여부에 따라 true 또는 false를 반환합니다.
• contains(className): 지정한 클래스가 요소에 존재하는지 확인합니다. 존재하면 true, 그렇지 않으면 false를 반환합니다.
• replace(oldClassName, newClassName): 요소에서 기존 클래스를 새 클래스로 교체합니다.

예제

<div id="myDiv" class="foo bar"></div>

let div = document.getElementById('myDiv');

// 클래스 추가
div.classList.add('new-class');
// 이제 div의 클래스는 "foo bar new-class"

// 클래스 제거
div.classList.remove('bar');
// 이제 div의 클래스는 "foo new-class"

// 클래스 토글
div.classList.toggle('toggle-class');
// 이제 div의 클래스는 "foo new-class toggle-class"
div.classList.toggle('toggle-class');
// "toggle-class"가 제거되어 "foo new-class"로 돌아감

// 클래스 존재 여부 확인
console.log(div.classList.contains('foo')); // true
console.log(div.classList.contains('bar')); // false

// 클래스 교체
div.classList.replace('new-class', 'replaced-class');
// 이제 div의 클래스는 "foo replaced-class"

주의사항

• **classList**는 IE 10 이상에서 지원됩니다. IE 9 이하에서는 className 속성을 사용하여 클래스 문자열을 직접 조작해야 합니다. 예: element.className += ' new-class';
• add, remove 메소드는 여러 클래스를 한 번에 추가하거나 제거하기 위해 여러 인자를 받을 수 있습니다. 예: element.classList.add('class1', 'class2');

DOM의 클래스 조작은 사용자 인터랙션에 따라 요소의 스타일을 변경하거나, 특정 상태를 시각적으로 나타내기 위해 광범위하게 사용됩니다. classList API는 이러한 작업을 간결하고 효율적으로 수행할 수 있게 도와줍니다.