(JavaScript) classList

classList

• 자바스크립트에서 클래스 이름을 조작하는 것
• 클래스를 조작하는 다양한 메서드를 쓸 수 있다
  • classList.add(): 클래스를 필요에 따라 삽입
  • classList.remove(): 클래스를 필요에 따라 제거
  • classList.contains(): 값이 존재하는지 체크 (True/False)
  • classList.toggle(): 클래스 값이 있는지 체크하고 없으면 더하고 있으면 제거

 

function updateItems(items, key, value) {
  items.forEach((item) => {
    if (item.dataset[key] === value) {
      item.classList.remove("invisible");
    } else {
      item.classList.add("invisible");
    }
  });
}

다음과 같은 updateItems 메서드가 있다. 이 메서드에서는 items의 원소 중 item이 인자로 들어온 key에 해당하는 값이 value랑 같을 때에만 화면에 보이고자 하고자 한다. 따라서 같을 때 item.classList.remove("invisible")을 통해 invisible 클래스를 제거하고 같지 않다면 invisible 클래스를 추가한다.

.item.invisible {
  display: none;
}

이후 css 파일에서 invisible 클래스를 갖고 있다면 화면에 보여지지 않도록 지정하면 된다.