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

Cập nhật ngày 17/12/2021

Đô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
}

Tham khảo:

★ Nếu bạn thấy bài viết này hay thì hãy theo dõi mình trên Facebook để nhận được thông báo khi có bài viết mới nhất nhé:

Cách xóa phần tử DOM trong JavaScript?
Cách gộp nhiều phần tử rồi cho kết quả vào một thẻ div trong JavaScript?
Chia sẻ:

Bình luận