JavaScript classList로 여러 클래스를 한 번에 추가·제거하는 방법

JavaScript의 classList 속성은 요소(element)의 클래스 이름들을 DOMTokenList 객체 형태로 반환합니다. 이 속성 자체는 읽기 전용(read-only)이지만, add()와 remove() 메서드를 활용하면 얼마든지 수정할 수 있습니다.

classList의 중복 방지 기능

classList 속성은 중복된 클래스가 요소에 불필요하게 추가되지 않도록 자동으로 걸러 줍니다. 따라서 여러 클래스를 한 번에 다루는 기능을 구현할 때도 이 중복 방지 기능을 그대로 유지하는 것이 좋습니다. 하나씩 반복해서 호출하는 장황한 기본 문법(longhand)이나 jQuery 사용이 마음에 들지 않는다면, DOMTokenList 프로토타입에 addMany 함수와 removeMany 함수를 직접 추가하는 방법을 추천합니다.

addMany · removeMany 구현 예제

프로토타입을 확장하면 공백으로 구분된 문자열을 한 번에 전달할 수 있습니다.

DOMTokenList.prototype.addMany = function(classes) {
    var arr = classes.split(' ');
    for (var j = 0, length = arr.length; j < length; j++) {
        this.add(arr[j]);
    }
};

DOMTokenList.prototype.removeMany = function(classes) {
    var arr = classes.split(' ');
    for (var j = 0, length = arr.length; j < length; j++) {
        this.remove(arr[j]);
    }
};

확장된 메서드는 다음과 같이 간결하게 사용할 수 있습니다.

// 사용 예시
var el = document.querySelector('#myElement');
el.classList.addMany('active visible highlighted');
el.classList.removeMany('hidden disabled');

참고: 최신 브라우저에서는 기본 지원

모던 브라우저에서는 add()와 remove() 메서드가 이미 여러 인수를 지원하므로, 별도의 확장 없이 아래처럼 작성할 수 있습니다.

el.classList.add('class1', 'class2', 'class3');
el.classList.remove('class4', 'class5');

다만 구형 브라우저(예: Internet Explorer)까지 호환해야 하는 환경이라면 위의 addMany/removeMany 확장 방식이 유용한 대안이 됩니다.