Front End Masterclass
KELAS 10 · SEMESTER 1 · USIA 15–16 TAHUN
Setelah menyelesaikan bab ini, kamu akan mampu:
Saat browser membuka halaman, ia membaca HTML lalu membangun pohon DOM. Akarnya adalah document, lalu bercabang ke <html>, <head> dan <body>. Setiap elemen menjadi node yang bisa kita ambil dan ubah lewat JavaScript. Coba klik node di pohon di samping!
// Mengakses & mengubah elemen lewat DOM const judul = document.getElementById('judul'); judul.textContent = 'Halo DOM!';
getElementById adalah cara tercepat & paling pasti untuk mengambil satu elemen. Ia mengembalikan elemen itu sendiri, atau null jika ID tidak ditemukan.
const el = document.getElementById('nama-siswa'); el.style.color = 'gold';
Ketik ID lalu lampu sorot mencari elemennya. (coba: nis-12)
Karena memakai CSS selector, querySelector sangat fleksibel: '.card', '#main', 'ul li' semua bisa. Tapi ia hanya mengembalikan satu — yang pertama ditemukan.
const el = document.querySelector('.card'); console.log(el.textContent); // kartu pertama
Untuk mengolah banyak elemen sekaligus, gunakan forEach pada hasil querySelectorAll. Sangat berguna untuk memberi gaya atau event ke banyak elemen.
const els = document.querySelectorAll('.red'); els.forEach((el) => { el.style.transform = 'scale(1.2)'; });
innerHTML mem-parsing string sebagai HTML. Bagus untuk membuat struktur, tapi hati-hati jika datanya dari user — bisa menjadi celah keamanan (XSS).
el.innerHTML = '<strong>Halo!</strong>';
Gunakan textContent ketika kamu hanya butuh teks — lebih aman dan lebih cepat daripada innerHTML karena tidak mem-parsing HTML.
el.textContent = 'Halo Dunia!';
toggle adalah favorit: jika class ada → dihapus, jika tidak ada → ditambah. Sempurna untuk tombol on/off seperti menu, dark mode, atau status aktif.
el.classList.add('aktif'); el.classList.remove('aktif'); el.classList.toggle('outfit-keren');
Sekarang kita beri "telinga" pada halaman web. Saatnya belajar Event Listener agar web bisa merespons klik, ketikan, dan aksi pengguna lainnya.
Alur sebuah event sangat sederhana namun powerful. Klik tombol di demo untuk melihat aliran event menyala satu per satu.
Satu elemen bisa punya banyak listener untuk event berbeda. Coba tombol di bawah — setiap klik tercatat di event log.
const btn = document.querySelector('#tombol'); let n = 0; btn.addEventListener('click', () => { n++; console.log('Diklik ' + n + ' kali'); });
Langkah membuat elemen: buat (createElement) → isi (textContent/innerHTML) → tempel (appendChild) ke induknya.
const li = document.createElement('li'); li.textContent = 'Item baru'; list.appendChild(li);
Dengan localStorage, pilihan mode pengguna tetap tersimpan walau halaman ditutup. Coba toggle lalu lihat penjelasannya.
document.body.classList.toggle('dark'); localStorage.setItem('mode', 'dark');
Modal terdiri dari overlay (latar gelap) dan box (kotak isi). Menampilkannya = tambah class show, menutupnya = hapus class itu.
function buka() { overlay.classList.add('show'); } function tutup() { overlay.classList.remove('show'); }
Kamu berhasil membuka modal pertamamu. Klik di luar kotak atau tombol di bawah untuk menutup.
const data = [{judul:'A'}, {judul:'B'}]; data.forEach(d => { grid.innerHTML += `<div>${d.judul}</div>`; });
Menggabungkan semua konsep DOM dalam satu aplikasi nyata: input + event, classList toggle, createElement & removeChild, dan counter dinamis.
<h1 id="judul">Judul Awal</h1> <p class="teks">Paragraf 1</p> <p class="teks">Paragraf 2</p> <p class="teks">Paragraf 3</p> <button id="btn">Aktifkan</button> <script> // Tulis kode-mu di sini… </script>
<form id="daftar"> <input id="nama" placeholder="Nama"> <input id="email" placeholder="Email"> <input id="hp" placeholder="No HP"> <button>Daftar</button> </form> <p id="pesan"></p>
Buat aplikasi To-Do List milikmu sendiri menggunakan HTML, CSS, dan JavaScript murni (tanpa framework). Terapkan semua konsep DOM yang sudah dipelajari di bab ini.
| Aspek | Bobot |
|---|---|
| Tambah & tampil task | 25% |
| Hapus task | 20% |
| Toggle selesai | 20% |
| Counter berfungsi | 15% |
| Tampilan rapi & rapih | 10% |
| Fitur bonus | +10% |
Kamu kini bisa membuat web yang hidup & interaktif. DOM adalah jembatan antara JavaScript dan halaman yang dilihat pengguna.