태그 안에 class를 추가하고 싶을 때는 아래와 같이 추가하면 된다.
// 변수로 지정하지 않았을 때,
document.getElementsByClassName('hello').classList.add('bye')
// 변수로 지정해놨을 때,
const greeting = document.getElementsByClassName('hello')
greeting.classList.add('bye')
이벤트를 할 때마다 클래스가 추가되고 없어지는 과정을 넣고 싶다면,
// 토글되는 함수 만들기
function handleClick (){
document.getElementsByClass('hello').toggle('bye');
}
// 이벤트화하기
gretting.addEventListener("click", handleClick);
토글함수를 활용해서 긴 if 문을 활용하지 않아도 클래스를 add, remove해 줄 수 있다.
+ 번외 (태그에 class가 포함되어있는지 확인하고 싶을 때,)
// 'hello'라는 클래스를 갖고있는 greeting 변수에 'bye'라는 클래스를 갖고 있는지 확인한다.
const greeting = document.querySelctor('hello');
//클래스가 포함되어있는지 확인하기
greeting.classList.contain('bye')
결과값은 Boolean인 true / false 둘 중 하나로 출력된다.