How to Check if a Class Exists with JavaScript

Checking if a class exists on an element is simple and fast with the JavaScript classList property’s contains() method.

Let’s first take a look at the generic formula for using classList.contains() and then we’ll look at a practical use case.

classList.contains() formula

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

In the generic example above we use the versatile querySelector() method to find our target element via its selector name. The selector could be a class selector, element selector, or another selector type.

We then assign the element we found with querySelector() to our declared element variable.

Then we attach the classList property’s contains() method to our element via its variable reference. Then inside the contains() method’s argument (inside the parenthesis) we specify the name of the 'class' we want to check if exists.

Generic examples are boring, let’s get practical!

The Uncluttered News Feed

Filtering with classList.contains()
— a practical use case

You’re visiting a website with a mixed news feed of many different categories. But you’re only interested in reading about technology.

Cluttered news feeds are blasphemous. Let’s filter out all the other categories, using the classList.contains() method.

First, let’s add some HTML so we have some content to work with. Then we’ll style it quickly, and move on to the JavaScript.

HTML for our news feed

<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 -->

For our HTML content we have:

• A big headline.
• A news feed with different categories.
• Outside of the news feed, we have a button called Technology. This is the button we’ll use to toggle (hide/show) all non-technology topics.

Obviously, our news feed example above only has a few news items (for illustration purposes), so it doesn’t look cluttered. But a real mixed news feed there would be a myriad of articles from each news category, flooding the feed. That’s when filtering buttons are useful.

CSS Styling

All the following CSS is cosmetic and optional, except the .js-hide class, which is a helper class we’ll use with JavaScript in the next segment.

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;
}

Just make sure you add that .js-hide class to your CSS stylesheet and let’s move on to JavaScript!

The JavaScript

Copy and paste the following code into your JS file. I’ll explain how everything works right below.

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)

How the JavaScript code works

• First we use querySelector() to grab our Technlogy button element via its class selector .btn-technology. which will act as the trigger for our filtering function later. We assign our button element to a variable called btn-technology.
• Then we use querySelectorAll() to grab all our News Feed (.news-feed) items and select each item link by their class name (.link). We then assign all our news item links to a variable called allNewsCategories.
• Then we create a function, showCategoryTechnology() {..} which we’ll call when the Technology button is clicked.
• Inside the function body, we loop through all items () inside the News Feed element and store them in an array [i]
• Inside the loop, we add a conditional if statement which says: “if any of the items on the list we just iterated through do not contain the class .category-technology — then run the classList.toggle method with the .js-hide class on those items.
• On the last line, we attach the addEventListener() method to our button element. We tell the event listener to listen for a 'click' event. When the button is clicked, it calls the showCategoryTechnology() function, which runs the entire code block that makes this toggling feature possible.

The ! symbol (Logical Operator) that we put in front of allNewsCategories[i] is what handles the “not” part of our if statement. If you remove ! then our code will do the opposite of what it does now.

We could also have used classList.remove() to remove our unwanted news items. But in most cases, it makes sense to give our users the option of hiding/showing items, which is what classList.toggle() does.

Get all the code on CodePen.

Resources

• MDN Web Docs element.classList