[자바스크립트] 클래스를 이용한 메서드

제이쿼리로 하면 간단한데, 자바스크립트로는 자주 사용해보지 않아서 정리보면 공부가 될것 같아 적어보려 합니다. 

 

- element.className 

클래스 이름을 가지고옴 

ex ) <div id="id" class="box01"></div>

document.getElementById('id').className
 
// "box01"

 

- element.classList

element.classList 자체는 읽기 전용 property지만 add()와 remove() 메서드를 이용하여 변형할 수 있다.

ex)

document.getElementById('id').classList
 
//[object DOMTokenList]: {0: "box01", length: 1, value: "box01"}
 

 

- element.classList.remove()

설정한 클래스 값을 제거한다.

ex)

document.getElementById('id').classList.remove("box01")
 
//클래스가 제거됨
 

 

- element.classList.add()

설정한 클래스 값을 추가한다.

ex)

document.getElementById('id').classList.add("box02")
 
//클래스가 새로 추가됨
//<div class="box01 box02"></div>
 

 

- element.classList.toggle( String [, force])

클래스 값을 토글링한다. 클래스 값이 추가하고 true를 반환 또는 클래스값을 제거하고 false를 반환한다. 

ex) <div id="btn"></btn>  

<div id="id" class="box01"></div>

 document.getElementById('btn').addEventListener("click", function () {
        document.getElementById('id').classList.toggle("new01");
    })
//처음누를때 <div id="id" class="box01 new01"></div>
//두번째 누를때 <div id="id" class="box01"></div>

div.btn를 누를때 "new01"의 클래스 값이 토글링한다. 

 

- element.classList.contains(string)

특정 클래스가 있는지 확인한다. true/ false로 반환한다.

ex)

 document.getElementById('id').classList.contains("new01");
//false

 

- element.classList.replace(oldclsss, newclass)

특정 클래스를 새로운 클래스로 변경한다. 

ex)

 document.getElementById('id').classList.replace( "box1", "new01");
//<div class="new01"></div>

 

참고 출처: https://developer.mozilla.org/ko/docs/Web/API/Element/classList

 

*브라우저마다 사용불가능한 메서드들이 있다.