Cách Kiểm Tra Phần Tử DOM Chứa Class Cho Trước Trong JavaScript?

Trang chủ » Classlist Trong Js Là Gì » Cách Kiểm Tra Phần Tử DOM Chứa Class Cho Trước Trong JavaScript?

Có thể bạn quan tâm

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

  • DOM là gì?
  • How to check the given element has the specified class in JavaScript?

Từ khóa » Classlist Trong Js Là Gì