⚡ Phase 3 — JS
P19 · Pertemuan 19 dari 20
Object & DOM
Memahami object JavaScript, destructuring, dan mulai memanipulasi DOM untuk membuat halaman web yang dinamis.
Tujuan Pembelajaran
- 01Membuat object literal dengan properti dan method
- 02Mengakses properti dengan dot notation dan bracket notation
- 03Menggunakan destructuring object dan array
- 04Memahami DOM (Document Object Model)
- 05Menyeleksi elemen: getElementById, querySelector, querySelectorAll
- 06Mengubah konten: innerHTML, textContent, innerText
Sub-topik & Materi
- 01Object literal: properti (key: value) dan method (key: function)
- 02Dot notation (obj.key) vs bracket notation (obj["key"])
- 03Destructuring: const { nama, umur } = objek; const [a, b] = array;
- 04DOM: pohon hierarki HTML yang dapat dimanipulasi via JavaScript
- 05Seleksi elemen: getElementById, querySelector (1 elemen), querySelectorAll (NodeList)
- 06Mengubah konten: innerHTML (HTML), textContent (teks saja)
Penjelasan Konsep
Konsep 1
Object JavaScript
Object adalah kumpulan pasangan key-value. Key adalah nama properti (string), value bisa berupa tipe data apa pun termasuk fungsi (method). Buat dengan kurung kurawal {}. Akses dengan dot notation (objek.properti) atau bracket notation (objek["properti"]). Bracket notation berguna saat nama properti dinamis atau mengandung spasi.
javascript
"t-kw">const siswa = { nama: "t-st">'Ahmad', umur: 20, kota: "t-st">'Kediri', hobi: ["t-st">'coding', "t-st">'futsal'], sapa: "t-kw">function() { "t-kw">return "t-st">`Halo, saya ${this.nama} dari ${this.kota}`; } }; "t-kw">class="t-cm">// Akses properti console.log(siswa.nama); "t-kw">class="t-cm">// "Ahmad" console.log(siswa["t-st">'kota']); "t-kw">class="t-cm">// "Kediri" console.log(siswa.sapa()); "t-kw">class="t-cm">// "Halo, saya Ahmad dari Kediri" "t-kw">class="t-cm">// Tambah/ubah properti siswa.nilai = 90; siswa.umur = 21; "t-kw">class="t-cm">// Destructuring "t-kw">const { nama, kota, umur } = siswa; console.log("t-st">`${nama}, ${umur} tahun, dari ${kota}`);
Konsep 2
DOM Manipulation Dasar
DOM (Document Object Model) adalah representasi HTML sebagai objek JavaScript. Gunakan querySelector (satu elemen) atau querySelectorAll (semua elemen) untuk memilih elemen. Ubah konten dengan innerHTML (insert HTML) atau textContent (teks aman). Ubah style dengan element.style.properti. Tambah/hapus class dengan classList.
javascript
"t-kw">class="t-cm">// Pilih elemen "t-kw">const judul = document.querySelector("t-st">'h1'); "t-kw">const semuaKartu = document.querySelectorAll("t-st">'.kartu'); "t-kw">const tombol = document.getElementById("t-st">'btn-kirim'); "t-kw">class="t-cm">// Ubah konten judul.textContent = "t-st">'Judul Baru'; "t-kw">class="t-cm">// teks aman judul.innerHTML = "t-st">'<em>Judul</em>'; "t-kw">class="t-cm">// bisa insert HTML "t-kw">class="t-cm">// Ubah style langsung judul.style.color = "t-st">'blue'; judul.style.fontSize = "t-st">'2rem'; "t-kw">class="t-cm">// Manipulasi "t-kw">class judul.classList.add("t-st">'aktif'); judul.classList.remove("t-st">'tersembunyi'); judul.classList.toggle("t-st">'dark'); "t-kw">class="t-cm">// toggle on/off console.log(judul.classList.contains("t-st">'aktif')); "t-kw">class="t-cm">// true "t-kw">class="t-cm">// Buat elemen baru "t-kw">const kartu = document.createElement("t-st">'div'); kartu.classList.add("t-st">'kartu'); kartu.innerHTML = "t-st">'<h2>Kartu Baru</h2>'; document.getElementById("t-st">'container').appendChild(kartu);
Contoh Kode Lengkap
javascript
"t-kw">class="t-cm">// === Object Literal === "t-kw">const siswa = { nama: "t-st">'Budi Santoso', umur: 20, kota: "t-st">'Kediri', skills: ["t-st">'HTML', "t-st">'CSS', "t-st">'JavaScript'], sapa() { "t-kw">return "t-st">`Halo, saya ${this.nama} dari ${this.kota}`; } }; "t-kw">class="t-cm">// Akses & Destructuring console.log(siswa.nama); "t-kw">class="t-cm">// Dot notation console.log(siswa["t-st">'umur']); "t-kw">class="t-cm">// Bracket notation "t-kw">const { nama, kota } = siswa; "t-kw">class="t-cm">// Destructuring "t-kw">class="t-cm">// === DOM Manipulation === "t-kw">class="t-cm">// Seleksi elemen "t-kw">const judul = document.getElementById("t-st">'judul'); "t-kw">const kartu = document.querySelector("t-st">'.kartu'); "t-kw">const semua = document.querySelectorAll("t-st">'.item'); "t-kw">class="t-cm">// Ubah konten judul.textContent = siswa.nama; kartu.innerHTML = "t-st">` <h2>${siswa.nama}</h2> <p>${siswa.kota}</p> <ul>${siswa.skills.map(s => `<li>${s}</li>"t-st">`).join("t-st">'')}</ul> `; "t-kw">class="t-cm">// Loop semua elemen semua.forEach(el => { el.style.color = "t-st">'blue'; });
Latihan Kelas · Buat objek data siswa dan tampilkan ke halaman HTML menggunakan DOM manipulation
1
Buat object const profil = { nama, umur, kota, skills: [], bio }
2
Di HTML, siapkan elemen dengan id="profil-card"
3
Gunakan querySelector untuk seleksi elemen
4
Gunakan innerHTML untuk render HTML dari data object ke dalam kartu
5
Gunakan querySelectorAll + forEach untuk styling semua elemen .skill-item
Kesalahan yang Sering Dibuat
Mengakses DOM sebelum HTML selesai dimuat — taruh script di akhir body atau gunakan defer
Lupa id= atau class= yang cocok — querySelector("#belumada") return null, lalu null.style = error
innerHTML vs textContent: innerHTML untuk HTML dinamis, textContent untuk teks murni (hindari XSS)
querySelectorAll return NodeList bukan Array — tidak bisa langsung .map(), convert dulu dengan Array.from()
Mengubah style langsung (element.style.color) lebih baik diganti toggle class — lebih maintainable