classList

Javascript는 HTML 파일의 각 태그를 읽어오고 기능을 추가하는 것 말고, 해당 태그 자체를 수정할 수도 있다. 그 중 가장 많이 쓰이는 기능 중 하나가 바로 classList이다.

classList는 태그를 getElementById나 querySelector 등의 함수로 읽어온 태그에 존재하는 멤버 변수로서, 해당 태그의 클래스가 리스트 형태로 저장되어 있다. 이 classList는 크게 세 가지 메소드를 지원하는데, 바로 클래스를 추가하는 add(*)와 클래스를 제거하는 remove(*), 그리고 클래스가 있다면 추가하고 없다면 제거하는 toggle(*)이다.

See the Pen classList by Themion (@themion) on CodePen.

위 예제에서 버튼을 누른 뒤 <span> 태그를 눌러보면, 색이 적힌 버튼은 누를 때마다 색이 변하고, 밑줄이 쳐진 버튼은 누를 때마다 밑줄이 생겼다 없어졌다 하는 모습을 볼 수 있다. 이는 색이 적힌 버튼을 눌렀을 때는 모든 색 클래스를 remove 메소드를 이용해 제거한 뒤 누른 버튼의 색 클래스를 add 메소드를 이용해 추가하고, 밑줄이 쳐진 버튼을 눌렀을 때는 toggle 메소드를 이용해 밑줄을 켰다 켜기 때문이다.