Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript로 클래스 존재 여부 확인하기 — classList.contains() 활용법

JavaScript의 classList 속성이 제공하는 contains() 메서드를 활용하면 요소에 특정 클래스가 존재하는지 간단하고 빠르게 확인할 수 있습니다.

먼저 classList.contains()의 기본 문법을 살펴본 뒤, 실전에서 바로 쓸 수 있는 활용 사례까지 함께 알아보겠습니다.

classList.contains() 기본 문법

var element = document.querySelector("selector")
element.classList.contains("class")

위 기본 예제에서는 다양한 상황에서 활용할 수 있는 querySelector() 메서드로 선택자 이름을 기준으로 대상 요소를 찾습니다. 선택자는 클래스 선택자, 태그 선택자 등 어떤 유형이든 사용할 수 있습니다.

querySelector()로 찾은 요소는 선언해 둔 element 변수에 할당됩니다.

그다음 변수 참조를 통해 해당 요소에 classList 속성의 contains() 메서드를 연결합니다. contains() 메서드의 인자(괄호 안)에는 존재 여부를 확인하고 싶은 클래스 이름을 지정합니다.

기본 예제만으로는 심심하니, 이제 실전 사례로 들어가 보겠습니다!

깔끔한 뉴스 피드 만들기

classList.contains()로 구현하는 필터링 — 실전 활용 사례

JavaScript로 클래스 존재 여부 확인하기 — classList.contains() 활용법

여러 카테고리의 뉴스가 한데 섞여 있는 피드를 제공하는 웹사이트에 접속했다고 가정해 봅시다. 그런데 당신이 읽고 싶은 것은 오직 기술(Technology) 관련 기사뿐이라면 어떨까요?

어수선하게 뒤엉킨 뉴스 피드는 독자를 금세 지치게 만듭니다. classList.contains() 메서드를 사용해 나머지 카테고리를 전부 걸러내 보겠습니다.

먼저 다룰 콘텐츠가 있도록 HTML을 작성합니다. 이후 간단히 스타일을 입히고, 마지막으로 자바스크립트로 넘어가겠습니다.

뉴스 피드용 HTML

<div class="wrapper">
  <h1>Newsfeed</h1>

  <div class="news-feed">
    <h3 class="headline">
      <a class="link category-health" href="#">Health</a>
    </h3>
    <h3 class="headline">
      <a class="link category-finances" href="#">Finances</a>
    </h3>
    <h3 class="headline">
      <a class="link category-politics" href="#">Politics</a>
    </h3>
    <h3 class="headline">
      <a class="link category-nature" href="#">Nature</a>
    </h3>
    <h3 class="headline">
      <a class="link category-humor" href="#">Humor</a>
    </h3>
    <h3 class="headline">
      <a class="link category-weather" href="#">Weather</a>
    </h3>
    <h3 class="headline">
      <a class="link category-technology" href="#">Technology</a>
    </h3>
    <h3 class="headline">
      <a class="link category-sports" href="#">Sports</a>
    </h3>
  </div>

  <div class="fixed-container">
    <span>Filter:</span>
    <button class="btn-technology">Technology</button>
  </div>
</div>
<!-- wrapper -->

HTML 콘텐츠의 구성은 다음과 같습니다.

  • 큰 제목(headline)
  • 여러 카테고리로 이루어진 뉴스 피드
  • 뉴스 피드 바깥에는 Technology 버튼이 하나 있습니다. 이 버튼으로 기술 외 주제를 모두 토글(숨김/표시)하게 됩니다.

물론 위 예제의 뉴스 피드는 설명을 위해 항목을 몇 개만 넣었기 때문에 복잡해 보이지 않습니다. 하지만 실제 혼합 뉴스 피드라면 각 카테고리의 수많은 기사가 피드를 가득 채울 것입니다. 바로 그럴 때 필터링 버튼이 빛을 발합니다.

CSS 스타일링

아래 CSS는 모두 디자인을 위한 것으로 생략해도 무방합니다. 다만 .js-hide 클래스만은 예외입니다. 이 클래스는 다음 단계에서 자바스크립트와 함께 사용할 헬퍼 클래스입니다.

body {
  font-family: "Source Sans Pro", "Helvetica", "Sans-Serif";
}

.wrapper {
  position: relative;
  padding-left: 1rem;
  padding-right: 1rem;
  margin: 2rem auto;
  max-width: 50em;
}

.news-feed {
  border: 1px solid #eee;
  max-height: 256px;
  overflow-y: scroll;
}

.headline {
  font-size: 1.25rem;
  padding: 0.25rem 1.5rem;
}

.link {
  color: #252525;
  text-decoration: none;
}

.fixed-container {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 1.5rem;
}

.btn-technology {
  cursor: pointer;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  margin-top: 2rem;
  margin-left: 1rem;
  border-radius: 4px;
  border: 1px solid #82b97e;
  outline: none;
}

.js-hide {
  display: none;
}

스타일시트에 .js-hide 클래스만 추가해 두었다면, 이제 자바스크립트로 넘어갈 준비가 끝난 것입니다!

자바스크립트 코드

아래 코드를 JS 파일에 복사해 붙여넣으세요. 작동 원리는 바로 이어지는 설명에서 자세히 다룹니다.

var btnTechnology = document.querySelector(".btn-technology")
var allNewsCategories = document.querySelectorAll(".news-feed .link")

function showCategoryTechnology() {
  for (var i = 0; i < allNewsCategories.length; i++) {
    if (!allNewsCategories[i].classList.contains("category-technology")) {
      allNewsCategories[i].parentElement.classList.toggle("js-hide")
    }
  }
}
btnTechnology.addEventListener("click", showCategoryTechnology)

자바스크립트 코드 작동 원리

  • 먼저 querySelector()로 클래스 선택자 .btn-technology를 통해 Technology 버튼 요소를 가져옵니다. 이 버튼은 이후 필터링 함수를 실행하는 트리거 역할을 하며, btnTechnology 변수에 할당됩니다.
  • 그다음 querySelectorAll()로 뉴스 피드(.news-feed)의 모든 항목을 가져온 뒤, 각 항목의 링크를 클래스 이름(.link)으로 선택합니다. 모든 뉴스 링크는 allNewsCategories 변수에 저장됩니다.
  • 이어서 showCategoryTechnology() {..} 함수를 정의합니다. 이 함수는 Technology 버튼이 클릭될 때 호출됩니다.
  • 함수 본문 안에서는 뉴스 피드 요소의 모든 항목을 반복문으로 순회하며 배열 [i]에 담습니다.
  • 반복문 안에는 조건 if 문이 들어갑니다. "방금 순회한 목록 중 .category-technology 클래스를 포함하지 않는 항목이 있다면, 해당 항목에 .js-hide 클래스로 classList.toggle 메서드를 실행하라"는 의미입니다.
  • 마지막 줄에서는 버튼 요소에 addEventListener() 메서드를 연결해 'click' 이벤트를 감지하도록 설정합니다. 버튼이 클릭되면 showCategoryTechnology() 함수가 호출되고, 토글 기능을 구현하는 전체 코드 블록이 실행됩니다.

allNewsCategories[i] 앞에 붙은 ! 기호(논리 연산자)가 if 문의 "not(아니다)" 조건을 담당합니다. !를 제거하면 코드는 지금과 정반대로 동작합니다.

원치 않는 뉴스 항목을 삭제하려면 classList.remove()를 사용할 수도 있습니다. 하지만 대부분의 경우 사용자에게 항목을 숨기거나 다시 보여줄 수 있는 선택권을 주는 편이 좋으며, 그 역할을 하는 것이 바로 classList.toggle()입니다.

전체 코드는 CodePen에서 확인할 수 있습니다.

참고 자료

  • MDN Web Docs element.classList