[자바스크립트] jquery 없이 DOM의 CSS 클래스 addClass, toggleClass, removeClass 구현하기

 

* javascript를 하게 되면 DOM객체에 CSS의 클래스를 추가하고 삭제하는 일이 많아졌을 것이다. 이 기능은 jquery로 간단하게 이용할 수도 있지만, 그 내부에서 돌아가는 사정은 알고 사용해야 할 것 아닌가. jquery만 의존해서는 자바스크립트 언어 실력이 향상 될 수 없기 때문에! 간단하게 순수 vanilla 자바스크립트로 구현해보자.

 

 

* addClass

: css 클래스를 추가하는 함수로, element와 class명을 받도록 한다.

function addClass(element, className) {
    element.className += " " + className;
};

 

: addClass는 쉽게 끝난다. 더이상 깊게 들어가야할 것은 안보인다.

 

 

* removeClass

: css 클래스를 제거하는 함수로, element와 class명을 받도록 한다. removeClass 함수의 경우는 addClass와는 조금 다르게 className이 중간에 있을수도 있으므로 그러한 것들을 고려해야한다. RegExp로 구현한다면 쉽게 구현이 가능하다.

function removeClass(element, className) {
    var check = new RegExp("(\\s|^)" + className + "(\\s|$)");
    element.className = element.className.replace(check, " ").trim();
};

 

: 위의 RegExp를 설명한다면, 일단 className은 앞에 공백(\\s)이나 문자열의 시작(^)이 오고, className의 뒤에는 또 공백(\\s)이나 파일의 끝($)이 오는 것을 감지하여 그 부분을 " " 공백으로 바꿔주고, 맨 앞이나 뒤였다면 공백을 없애주는 trim() 함수를 호출하는 것이다. 단순히 replace(className)으로 안하는 것은 예를 들면 현재 className이 "hamburger ham" 인 경우 replace(ham)만 쓰게 되면 앞있는 hamburger의 ham이 삭제 됨으로써 "burger ham" 이 될 수 있는 위험성이 있기 때문이다. 이는 "on" 등과 같은 클래스를 remove할 때에 더욱더 조심해야한다. 맨 뒤에 trim을 해주는 것은 빈 공백 " "으로 바꿔줬기 때문에 만약 맨뒤나 맨 앞에 있는 경우 계속 추가/삭제를 해서 공백이 늘어나는 것을 방지하기 위함이다.

 

 

* toggleClass

: css 클래스가 있으면 켜주고 없으면 추가하는 함수로, element와 className을 인자로 받는다. toggleClass의 경우 위의 두 함수를 사용할수도 있지만 어짜피 removeClass와 같은 RegExp를 하나 사용해야하는데다 간단하므로 위의 함수들을 굳이 안쓰고 그냥 구현해도 그다지 길어지지 않는다.

function toggleClass(element, className) {
    var check = new RegExp("(\\s|^)" + className + "(\\s|$)");
    if (check.test(element.className) {
        element.className = element.className.replace(check, " ").trim();
    } else {
        element.className += " " + className;
    }
}

 

: 간단하게 끝났다. 위의 RegExp자체는 removeClass하고 동일한 정규표현식이고, test는 인자로 들어오는 문자열을 대입해서 해당 정규 표현식을 만족하는지 여부를 테스트하는 함수이다. 어렵게 indexOf라던가 substring 이런것을 이용할 필요 없이 이렇게 정규표현식을 이용하면 아주 쉽게 구현이 가능하다.

 

* 아주 쉽다! 이제 이 기능을 위해 jquery를 가져올 필요없이 쉽게 구현하면 될 것이다.

 

끝.