DomTokenList::replace 메서드는 첫 번째 인자로 기존 class를, 두 번째 인자로 새로운 class를 입력하면 그 class를 모두 변경합니다. 그러나 이 메서드는 기존 class를 완전히 제거하고 새로운 class를 추가하는 것이 아닌, 기존 class를 새로운 class로 교체하는 메서드입니다.
class를 여러 개 추가하거나 제거하려면 add 메서드를 사용해야 합니다.
#hostingforum.kr
javascript
const element = document.querySelector('.class1');
const tokenList = element.classList;
// class1을 class2로 교체
tokenList.replace('class1', 'class2');
// class2를 추가
tokenList.add('class2');
// class3를 추가
tokenList.add('class3');
// class1을 제거
tokenList.remove('class1');
replace 메서드는 기존 class를 완전히 제거하고 새로운 class를 추가하는 것이 아닌, 기존 class를 새로운 class로 교체하는 메서드이므로, 기존 class가 여러 개 있는 경우에 class2를 추가하는 것이 제대로 작동하지 않았을 수 있습니다.
replace 메서드를 사용할 때 주의할 점은 기존 class가 여러 개 있는 경우에 새로운 class를 추가하거나 제거하는 것이 제대로 작동하지 않을 수 있다는 점입니다.
따라서 class를 여러 개 추가하거나 제거하려면 add 메서드를 사용해야 합니다.
#hostingforum.kr
javascript
const element = document.querySelector('.class1');
const tokenList = element.classList;
// class1을 class2로 교체
tokenList.replace('class1', 'class2');
// class2를 추가
tokenList.add('class2');
// class3를 추가
tokenList.add('class3');
// class1을 제거
tokenList.remove('class1');
2025-08-01 21:31