Phương thức classList contains() trong JavaScript

• Bùi Tấn Lực
• 909
• 16/09/2025

Chức năng của Phương thức classList contains() trong JavaScript

Phương thức classList contains() trong JavaScript dùng để kiểm tra một giá trị có nằm trong thuộc tính class của một phần tử HTML hay không, nếu có sẽ trả về true, nếu không có sẽ trả về false.

Cú pháp của Phương thức classList contains() trong JavaScript

let ketqua = tenbien.classList.contains("giatri");

tenbien: Tên biến là phần tử HTML thường dùng document.getElementById("giá trị id") để lấy.

giatri: Giá trị của class.

ketqua: Kết quả trả về là true hoặc false.

Code Phương thức classList contains() trong JavaScript

const ketqua = document.getElementById("pid").classList.contains("pclassc");

<p id="pid" class="pclass pclassbg pclassc" >Nội dung đã css</p>
<p>Có giá trị pclassc trong class của id pid không: <span id="ketquaid"></span></p>
<script>
// Lấy danh sách các phương thức, thuộc tính của classList dành cho id pid và kiểm tra giá trị pclassc có nằm trong class của id pid hay không.
const ketqua = document.getElementById("pid").classList.contains("pclassc");
// Gắn kết quả
document.getElementById("ketquaid").innerHTML = ketqua;
</script>

Kết quả:

Có giá trị pclassc trong class của id pid không: true

Chạy Thử

Ứng dụng phương thức classList contains() trong JavaScript

Phương thức classList.contains() hữu ích khi JavaScript cần biết một phần tử HTML hiện có một class cụ thể hay chưa. Kết quả nhận được là giá trị Boolean true hoặc false, từ đó có thể dùng để quyết định bước xử lý tiếp theo.

Kiểm tra class trước khi thực hiện thao tác với phần tử HTML

Trước khi thêm, xóa hoặc thay đổi trạng thái của một phần tử, có thể dùng contains() để kiểm tra class hiện tại. Cách này giúp điều kiện xử lý rõ ràng hơn, đặc biệt khi giao diện có nhiều trạng thái khác nhau.

Ví dụ, kiểm tra phần tử có class active trước khi thực hiện một thao tác:

const menu = document.querySelector('.menu');

if (menu.classList.contains('active')) {
    console.log('Menu đang được kích hoạt');
}

Nếu class active tồn tại, điều kiện trả về true. Ngược lại, JavaScript sẽ nhận false và bỏ qua phần xử lý bên trong if.

Kết hợp contains() với if để xử lý điều kiện

Giá trị Boolean từ contains() có thể đưa trực tiếp vào câu lệnh if. Đây là cách sử dụng phổ biến khi class của phần tử được xem như một dấu hiệu xác định trạng thái.

Chẳng hạn, một nút có class disabled có thể được kiểm tra trước khi thực hiện hành động:

const button = document.querySelector('.button');

if (!button.classList.contains('disabled')) {
    console.log('Có thể thực hiện thao tác');
}

Việc kiểm tra trước giúp mã JavaScript tránh thực hiện hành động khi phần tử đang ở trạng thái không cho phép. Khi điều kiện thay đổi, chỉ cần cập nhật class tương ứng mà không phải tạo thêm biến trạng thái riêng.

Kiểm tra trạng thái class khi người dùng tương tác

contains() đặc biệt phù hợp với các thành phần giao diện thay đổi theo thao tác của người dùng như menu, tab, hộp thông báo hoặc nút bật tắt. JavaScript có thể dựa vào class hiện tại để xác định giao diện đang ở trạng thái nào.

Ví dụ, khi người dùng nhấn nút, chương trình kiểm tra class open để biết menu đã mở hay chưa:

const menu = document.querySelector('.menu');
const button = document.querySelector('.button');

button.addEventListener('click', function () {
    if (menu.classList.contains('open')) {
        console.log('Menu đang mở');
    } else {
        console.log('Menu đang đóng');
    }
});

Cách làm này giúp JavaScript đọc trực tiếp trạng thái đang được thể hiện trên phần tử HTML. Khi kết hợp với các phương thức khác của classList, contains() có thể trở thành bước kiểm tra trước khi chương trình thay đổi giao diện.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Phương thức classList contains() trong JavaScript.

Bùi Tấn Lực

Đánh giá

Chia sẻ nội dung đánh giá của bạn về Phương thức classList contains() trong JavaScript
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bình luận, Hỏi đáp