Note classList 속성과 setAttribute() 메서드
classList 속성으로 class 속성값을 추가하거나 삭제하면 기존 요소가 가지고 있던 class 속성값을 보존하면서 추가하거나 삭제한다는 특징이 있습니다. 그래서 다음 코드처럼 a 태그에 class 속성이 이미 있었다면 여기에 단순히 추가되는 형태로 코드가 작동합니다.
<a href="#" class="fz20">link</a>
<script>
const aEl = document.querySelector("a");
// a 태그의 기존 class 속성값을 보존하면서 red-color 값 추가
aEl.classList.add("red-color");
</script>
실행결과
<a href="#" class="fz20 red-color">link</a>
하지만 setAttribute() 메서드는 아예 속성값을 새로 설정하는 것이어서 기존 class 속성값을 보존하지 않습니다.
<a href="#" class="fz20">link</a>
<script>
const aEl = document.querySelector("a");
// a 태그의 기존 class 속성값을 보존하지 않고 red-color 값 설정
aEl.setAttribute("red-color");
</script>
실행결과
<a href="#" class="red-color">link</a>
이는 classList 속성의 remove() 메서드와 removeAttribute() 메서드에서도 똑같습니다. remove() 메서드는 기존 속성을 보존하면서 매개변수로 전달된 속성만 삭제하지만, removeAttribute() 메서드는 속성 자체를 삭제합니다.