Mengelola Classlist: add, remove, toggle, contains.

 const menu = document.querySelector(".nav-menu"); menu.classList.remove("open"); ``` --- ## 3. classList.toggle()
Ini adalah metode yang paling "pintar" dan sangat sering digunakan. `toggle` bekerja seperti saklar lampu:
* Jika class **sudah ada**, maka akan **dihapus**.
* Jika class **belum ada**, maka akan **ditambahkan**. * **Kegunaan:** Tombol Dark Mode, menu hamburger (buka/tutup), atau dropdown.
* **Contoh:** ```javascript const btnTheme = document.querySelector("#theme-switcher"); btnTheme.addEventListener("click", () => { document.body.classList.toggle("dark-mode"); }); ``` --- ## 4. classList.contains()
Metode ini digunakan untuk **memeriksa** apakah sebuah elemen memiliki class tertentu atau tidak. Hasilnya berupa nilai boolean (`true` atau `false`). * **Kegunaan:** Melakukan logika kondisional (if-else) berdasarkan status tampilan elemen.
* **Contoh:** ```javascript const notif = document.querySelector(".alert"); if (notif.classList.contains("error")) { console.log("Ada masalah pada validasi!"); } ``` --- ## Tabel Ringkasan | Metode | Fungsi | Hasil / Return |
| :--- | :--- | :--- |
| **`add`** | Menambah class | `undefined` |
| **`remove`** | Menghapus class | `undefined` |
| **`toggle`** | Tambah/Hapus otomatis | `boolean` (true jika jadi ada, false jika hilang) |
| **`contains`** | Cek keberadaan class | `boolean` (true/false) | --- ## Contoh Kasus: Komponen Accordion (Tanya-Jawab) Mari kita gabungkan semuanya dalam satu logika sederhana untuk komponen FAQ: ```javascript
const faqItem = document.querySelector(".faq-item"); faqItem.addEventListener("click", () => { // 1. Cek apakah item sudah terbuka const isOpen = faqItem.classList.contains("open"); if (isOpen) { // 2. Jika terbuka, tutup (remove) faqItem.classList.remove("open"); console.log("Menutup FAQ"); } else { // 3. Jika tertutup, buka (add) faqItem.classList.add("open"); console.log("Membuka FAQ"); } // Cara singkat pengganti if-else di atas: // faqItem.classList.toggle("open");
});