Check If An Element Contains A Class - JavaScript Tutorial

Skip to content

Home » Check If an Element contains a Class

To check if an element contains a class, you use the contains() method of the classList property of the element:

element.classList.contains(className);Code language: CSS (css)

In this method, you pass the className to the contains() method of the classList property of the element. If the element contains the className, the method returns true. Otherwise, it returns false.

For example, suppose you have the following <div> element with two classes: secondary and info:

<div class="secondary info">Item</div>Code language: HTML, XML (xml)

To check if the <div> element contains the secondary class, you use the following code:

const div = document.querySelector('div'); div.classList.contains('secondary'); // trueCode language: JavaScript (javascript)

In this example, we use the querySelector() method to select the div and use the contains() method to check if its class list contains the secondary class.

The following example returns false because the <div> element doesn’t have the error class:

const div = document.querySelector('div'); div.classList.contains('error'); // falseCode language: JavaScript (javascript)

Summary

• Use the element.classList.contains() method to check if an element contains a specific class name.

Send Cancel PreviouslyToggle a Class of an Element Up NextReplace a Class of an Element Search for:

Getting Started

• What is JavaScript
• Install a JavaScript Code Editor
• Meet the Console Tab of Devtools
• JavaScript Hello World

JavaScript Fundamentals

• Syntax
• Variables
• Data Types
• Number
• Numeric Separator
• Boolean
• String
• Object
• Primitive vs. Reference Values
• Array

JavaScript Operators

• Arithmetic Operators
• Remainder Operator
• Assignment Operators
• Unary Operators
• Comparison Operators
• Logical Operators

Control Flow

• if
• if else
• if else if
• Ternary Operator (?:)
• switch case
• while
• do while
• for
• break
• continue
• Comma Operator

JavaScript Functions

• Functions
• Functions are First-Class Citizens
• Anonymous Functions
• Understanding Pass-By-Value in JavaScript
• Recursive Functions
• Default Parameters

JavaScript Objects

• Object Methods
• Constructor Functions
• Prototype
• Constructor/Prototype Pattern
• Prototypal Inheritance
• JavaScript this
• globalThis
• Object Properties
• for…in Loop
• Enumerable Properties
• Own Properties
• Factory Functions
• Object Destructuring
• Optional Chaining Operator
• Object Literal Syntax Extensions

Classes

• Class
• Getters & Setters
• Class Expressions
• Computed Properties
• Inheritance
• new.target
• Static Methods
• Static Properties
• Private Fields
• Private Methods
• instanceof Operator

Advanced Functions

• Function Type
• The call() Method
• The apply() method
• The bind() Method
• Closures
• Immediately Invoked Function Expression (IIFE)
• Returning Multiple Values
• Arrow Functions
• Arrow Functions: Do & Don’t
• Rest Parameters
• Callback

Promises & Async/Await

• Promises
• Promise Chaining
• Promise.all()
• Promise.race()
• Promise.any()
• Promise.allSettled()
• Promise.prototype.finally()
• Promise Error Handling
• async/await
• Promise.withResolvers()

JavaScript Modules

• Modules
• Dynamic Import
• Top-level Await Modules

Javascript Error Handling

• try…catch
• try…catch…finally
• Throw an Exception
• Optional catch Binding

JavaScript Runtime

• Execution Context
• Call Stack
• Event Loop
• Hoisting
• Variable Scopes

Primitive Wrapper Types

• Primitive Wrapper Types
• Boolean
• Number
• BigInt
• String

More JavaScript Operators

• Falsy
• Nullish Coalescing Operator
• Logical Assignment Operators
• Exponentiation Operator