0Pricing
JavaScript Academy · Pelajaran

Memodifikasi Atribut dan Kelas

Gunakan setAttribute dan API classList.

Memodifikasi Atribut dan Kelas adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Atribut dan Kelas

Elemen memiliki atribut (seperti href atau data-id) dan kelas CSS. JavaScript menyediakan API yang tepat untuk membaca dan mengubah keduanya.

getAttribute

getAttribute membaca nilai atribut sebagai teks, atau mengembalikan null jika atribut tersebut tidak ada.

const link = document.querySelector("a");
console.log(link.getAttribute("href"));

setAttribute

setAttribute membuat atau memperbarui atribut. Nilainya selalu berupa teks.

link.setAttribute("href", "https://example.com");
link.setAttribute("target", "_blank");

removeAttribute dan hasAttribute

Gunakan removeAttribute untuk menghapus atribut dan hasAttribute untuk memeriksa keberadaannya.

if (link.hasAttribute("target")) {
  link.removeAttribute("target");
}

Properti vs Atribut

Banyak atribut juga tersedia sebagai properti elemen (seperti element.id atau input.value). Properti mencerminkan keadaan saat ini, sedangkan atribut sering kali menyimpan nilai HTML awal.

input.value;                 // current value
input.getAttribute("value"); // original default

Kumpulan Data untuk data-*

Atribut khusus data-* tersedia melalui objek dataset menggunakan kunci camelCase.

const card = document.querySelector(".card");
console.log(card.dataset.userId); // from data-user-id
card.dataset.state = "open";       // sets data-state

Ikhtisar classList

classList adalah objek langsung untuk mengelola kelas tanpa menyunting teks className secara manual.

const box = document.querySelector(".box");
console.log(box.classList);

classList.add dan remove

add dan remove menerima satu atau beberapa nama kelas serta menangani duplikat atau kelas yang tidak ada tanpa masalah.

box.classList.add("active", "highlight");
box.classList.remove("hidden");

classList.toggle

toggle menambahkan kelas jika belum ada dan menghapusnya jika sudah ada, lalu mengembalikan nilai benar atau salah yang menunjukkan status baru. Argumen kedua memaksa kelas untuk aktif atau nonaktif.

box.classList.toggle("open");
box.classList.toggle("open", true); // force add

classList.contains dan replace

contains memeriksa keanggotaan, sedangkan replace menukar satu kelas dengan kelas lain di tempatnya.

if (box.classList.contains("active")) {
  box.classList.replace("active", "inactive");
}

Mengapa classList Lebih Baik daripada className

Menyunting className sebagai teks berisiko menimpa kelas lain. classList hanya mengubah kelas yang dituju dengan aman.

box.className = "active"; // wipes all other classes
box.classList.add("active"); // keeps the rest

Pemeriksaan Cepat

Pilih perilaku toggle.

Ringkasan

Baca dan tulis atribut dengan getAttribute/setAttribute/removeAttribute/hasAttribute, dan akses data-* melalui dataset. Kelola kelas dengan metode classList, yaitu add, remove, toggle, contains, dan replace, yang lebih aman daripada menimpa className.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Memodifikasi Atribut dan Kelas” gratis?

Ya — teks lengkap “Memodifikasi Atribut dan Kelas” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Memodifikasi Atribut dan Kelas”?

Gunakan setAttribute dan API classList. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Memodifikasi Atribut dan Kelas” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Mengubah Teks dan Konten HTML
  2. Membuat dan Menyisipkan Elemen
  3. Memodifikasi Atribut dan Kelas
  4. Menghapus dan Mengganti Simpul
← Kembali ke JavaScript Academy