JavaScript로 클래스가 존재하는지 확인하는 방법

요소에 클래스가 있는지 확인하는 것은 JavaScript classList 속성의 contains()를 사용하여 간단하고 빠릅니다. 방법.

먼저 classList.contains()를 사용하기 위한 일반 공식을 살펴보겠습니다. 그런 다음 실용적인 사용 사례.

classList.contains() 수식

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

위의 일반적인 예에서는 다양한 querySelector()를 사용합니다. 선택자 이름을 통해 대상 요소를 찾는 메서드입니다. 선택기는 클래스 선택기, 요소 선택기 또는 다른 선택기 유형일 수 있습니다.

그런 다음 querySelector()로 찾은 요소를 할당합니다. 선언된 element에 변수.

그런 다음 classList 속성의 contains()를 첨부합니다. element에 대한 메소드 변수 참조를 통해. 그런 다음 contains() 내부 메서드의 인수(괄호 안에)가 있는지 확인하려는 '클래스'의 이름을 지정합니다.

일반적인 예제는 지루합니다, 실용적으로 가자!

깔끔한 뉴스피드

classList.contains()로 필터링
— 실제 사용 사례

다양한 카테고리의 혼합 뉴스 피드가 있는 웹사이트를 방문하고 있습니다. 하지만 당신은 기술에 관한 글에만 관심이 있습니다.

어수선한 뉴스 피드는 신성 모독입니다. classList.contains()를 사용하여 다른 모든 카테고리를 필터링해 보겠습니다. 방법.

먼저 HTML을 추가하여 작업할 콘텐츠를 만들어 보겠습니다. 그런 다음 빠르게 스타일을 지정하고 JavaScript로 넘어갑니다.

뉴스 피드용 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 콘텐츠의 경우:

• 큰 헤드라인
• 다양한 카테고리의 뉴스 피드.
• 뉴스 피드 외부에 기술이라는 버튼이 있습니다. 이것은 기술이 아닌 모든 주제를 전환(숨기기/표시)하는 데 사용할 버튼입니다.

분명히 위의 뉴스 피드 예제에는 몇 가지 뉴스 항목(설명용)만 있으므로 복잡해 보이지 않습니다. 하지만 실제 혼합 뉴스 피드 각 뉴스 카테고리의 무수히 많은 기사가 피드를 가득 채울 것입니다. 그럴 때 필터링 버튼이 유용합니다.

CSS 스타일 지정

다음 CSS는 모두 .js-hide를 제외하고 외관상 및 선택 사항입니다. 클래스는 다음 세그먼트에서 JavaScript와 함께 사용할 도우미 클래스입니다.

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를 추가했는지 확인하세요. 클래스를 CSS 스타일시트에 추가하고 JavaScript로 넘어갑시다!

자바스크립트

다음 코드를 복사하여 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를 통해 Technlogy 버튼 요소를 가져옵니다. . 나중에 필터링 기능의 트리거 역할을 합니다. 버튼 요소를 btn-technology라는 변수에 할당합니다. .
• 그런 다음 querySelectorAll()을 사용합니다. 모든 뉴스 피드(.news-feed)를 가져오려면 ) 항목을 선택하고 클래스 이름(.link)으로 각 항목 링크를 선택합니다. ). 그런 다음 모든 뉴스 항목 링크를 allNewsCategories라는 변수에 할당합니다. .
• 그런 다음 showCategoryTechnology() {..} 함수를 만듭니다. 기술 버튼을 클릭하면 호출됩니다.
• 함수 본문 내에서 루프 News Feed 요소 내의 모든 항목()을 통해 배열 [i]에 저장
• 루프 내부에 조건부 if 문을 추가합니다. "우리가 방금 반복한 목록의 항목 중 하나라도 하지 않는 .category-technology 클래스 포함 — 그런 다음 .js-hide를 사용하여 classList.toggle 메서드를 실행합니다. 해당 항목에 대한 수업입니다.
• 마지막 줄에 addEventListener()를 첨부합니다. 메소드를 버튼 요소에 추가합니다. 이벤트 리스너에게 '클릭' 이벤트를 수신하도록 지시합니다. 버튼을 클릭하면 showCategoryTechnology()가 호출됩니다. 이 토글 기능을 가능하게 하는 전체 코드 블록을 실행하는 함수입니다.

! allNewsCategories[i] 앞에 넣는 기호(논리 연산자) if의 "not" 부분을 처리하는 것입니다. 성명. !를 제거하면 그러면 우리 코드는 지금 하는 일과 반대의 일을 할 것입니다.

classList.remove()를 사용할 수도 있습니다. 원치 않는 뉴스 항목을 제거합니다. 그러나 대부분의 경우 classList.toggle()이 하는 것처럼 사용자에게 항목을 숨기거나 표시할 수 있는 옵션을 제공하는 것이 좋습니다.

CodePen에서 모든 코드를 받으세요.

자료

• MDN 웹 문서 요소.classList