1. Javascript 안에서 클래스 지정하기
xx.className="YYY"
className이란 getter이면서 setter이다.
위와 같이 html태그에 직접 클래스를 지정하지않고
Javascript내에서 클래스 지정이 가능하다
하지만 이렇게 작성해버리면 active에서 오타가 나게되는 경우
코드실행에 문제가 생기기 때문에 밑에와 같이 수정해 주는것이 좋다.
하나 문제가 된다면
HTML태그에서 클래스 지정, 수정을 했을 경우 위 if문을 실행하게 되면 HTML에서 지정해둔 과거의 클래스가 사라지기 때문에
기존의 클래스도 같이 clickclass에 포함해야한다.
2. classList 사용하기
XX.classList.contains()
classList는 contains()를 이용하여 매개변수안에 있는값이 클래스로 포함하고있는지 확인만 해 주는것이다.
if문 조건으로 사용하기에 매우 유용하더라
추가적으로 classList를 사용하여 class를 추가하거나 삭제할 수 있다.
classList를 사용하면 좋은점은 className을 사용하였을땐 if문에서 클래스를 사라지게 만들어버리면 HTML태그에 존재했던 과거의 클래스도 사라졌었는데 classList는 이와같은 현상을 방지할 수 있다.
className과 똑같이 구현되지만 기존 HTML태그의 클래스를 살리면서 클래스를 추가하고 삭제 할 수 있다.
3. toggle
toggle의 정의는 토큰을 toggle한다. 토큰이 존재한다면 토큰을 제거하고 존재하지 않는다면 토큰을 추가한다.
밑에 사진과 같이 classList를 활용하여 작성한 if문을
단 한줄로 바꿀 수 있다.
즉, toggle은 a1의 classList에 clickclass가 이미 있는지 확인해서
만약 있다면, toggle이 clickclass를 제거해준다
만약 a1의 classList에 존재하지않는다면, toggle이 clickclass를 classList에 추가해준다
