Cách kiểm tra phần tử DOM chứa class cho trước trong JavaScript?

Đôi khi bạn cần kiểm tra phần tử DOM chứa class cho trước "X" hay không.

Để giải quyết vấn đề này, bạn có thể sử dụng phương thức contains(class-name) của thuộc tính classList trong phần tử DOM.

Cú pháp

Cú pháp kiểm tra:

element.classList.contains("class-name");

Phương thức trên trả về true nếu phần tử chứa class class-name, ngược lại thì trả về false.

Ví dụ

Phần tử DOM như sau:

index.html

<h1 id="main" class="main">Welcome to JavaScript</h1>

Các bước kiểm tra phần tử DOM chứa class cho trước hay không như sau:

Query để tìm phần tử DOM cần kiểm tra.
Sử dụng phương thức elem.classList.contains() để kiểm tra với class cho trước.

main.js

// query phần tử DOM cần kiểm tra
let elem = document.querySelector("#main");

// ví dụ kiểm tra class main
let hasClassMain = elem.classList.contains("main");

if (hasClassMain) {
  console.log("Found class: main"); // đoạn log này được ghi ra
} else {
  console.log("Not found class: main");
}

// ví dụ kiểm tra class other
let hasClassOther = elem.classList.contains("other");

if (hasClassOther) {
  console.log("Found class: other");
} else {
  console.log("Not found class: other"); // đoạn log này được ghi ra
}