자바스크립트 : classList - 클래스 확인, 추가, 제거, 변경

자바스크립트에서 classList 함수를 사용해서 해당 요소에 특정 class를 확인하거나, 추가, 제거, 변경 할 수 있다.

 

 

 

classList

    <div class="class1 class2 class3"></div>

    <script>
        var test = document.querySelector(".class1");
        document.write(test.classList); //class1 class2 class3
        document.write(test.classList[0]); //class1
        document.write(test.classList[1]); //class2
        document.write(test.classList[2]); //class3
        document.write(test.classList[3]); //undefined
    </script>

우선 class1 클래스를 가지고 있는 태그 요소를 document.querySelector를 이용해서 가져오고 test 변수에 저장했다.

classList를 이용하면 해당 요소의 클래스들의 목록을 확인할 수 있다. 

가지고 있는 클래스의 목록이 확인되고 각 클래스들은 classList 배열에 하나씩 저장되어 있다.

클래스 하나씩 가져오기 위해 배열 인덱스값을 이용했다. 클래스가 3개로 classList[2]까지 저장되어 있기 때문에 [3]을 출력하면 undefined로 뜬다.

 

 

 

classList.contains()

        document.write(test.classList.contains('class1')); //true
        document.write(test.classList.contains('class4')); //false

해당 클래스를 포함하고 있는지 확인한다. 포함하면 true, 포함하지 않으면 false를 반환한다.

 

 

 

classList.add()

        test.classList.add('class1');
        document.write(test.classList); //class1 class2 class3
        test.classList.add('class4');
        document.write(test.classList); //class1 class2 class3 class4

클래스를 추가할 수있다.

하나의 태그에 동일한 클래스가 여러번 들어가지는 않기 때문에 이미 존재하는 클래스는 add해도 무시된다.

 

 

 

 

classList.remove()

        test.classList.remove('class4');
        document.write(test.classList); //class1 class2 class3

remove로 존재하는 클래스를 삭제할 수 있다.

 

 

 

classList.replace( , )

        test.classList.replace('class1','classA');
        document.write(test.classList); //classA class2 class3

replace로 기존의 클래스 이름을 새로운 클래스 이름으로 변경한다. class1이 classA로 변경된 것을 확인하였다.