FluentStack

DOM Selection Dasar

Mode tersedia: dark, light, paper
MasukDaftar
Beginner · Level 4: JavaScript FundamentalsBeginner35 menitBahasa Indonesia

DOM Selection Dasar

Belajar memilih elemen halaman dengan JavaScript dan mengubah teks yang tampil di browser.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Memahami DOM sebagai representasi halaman di JavaScript
  • Memilih elemen dengan document.querySelector
  • Mengubah teks elemen dengan textContent
JavaScriptDOMquerySelector

Isi lesson

7 blok
  1. 1.
    JavaScript mulai menyentuh halamanBelum selesaiWajib
  2. 2.
    Pilih dulu, baru ubahBelum selesaiWajib
  3. 3.
    Mengubah teks dari JavaScriptBelum selesaiWajib
  4. 4.
    Selector harus cocok dengan HTMLBelum selesaiWajib
  5. 5.
    Cek pemahamanBelum selesaiWajib
  6. 6.
    Coding practiceBelum selesaiWajib
  7. 7.
    RingkasanBelum selesaiWajib

JavaScript mulai menyentuh halaman

Wajib

Di dua module sebelumnya, kamu menulis JavaScript yang bekerja dengan value, function, array, dan object. Sekarang JavaScript mulai terhubung ke halaman yang terlihat. DOM adalah cara browser merepresentasikan HTML agar bisa dibaca dan diubah lewat JavaScript.

Bagian ini memengaruhi progres lesson.

Pilih dulu, baru ubah

Wajib

Pola pertama DOM sederhana: pilih elemen, simpan ke variable, lalu ubah bagian yang diperlukan. Untuk memilih satu elemen, kamu bisa memakai document.querySelector dengan selector CSS seperti #headline, .card, atau h1. Setelah elemen ditemukan, textContent bisa dipakai untuk mengganti teks di dalamnya.

Bagian ini memengaruhi progres lesson.

Mengubah teks dari JavaScript

Wajib
js
const title = document.querySelector("#title");
const statusText = document.querySelector("#statusText");

title.textContent = "Lesson siap dipelajari";
statusText.textContent = "Teks ini diubah lewat JavaScript.";

Baris pertama memilih elemen dengan id title. Baris kedua memilih elemen dengan id statusText. Dua baris terakhir mengganti teks yang terlihat di halaman.

Bagian ini memengaruhi progres lesson.

Kesalahan umum

Wajib

Selector harus cocok dengan HTML

Kalau HTML punya id="title", selector JavaScript harus ditulis "#title". Kalau tanda # hilang, JavaScript akan mencari elemen <title>, bukan elemen dengan id title.

Bagian ini memengaruhi progres lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Kamu ingin memilih elemen HTML dengan id="message". Selector apa yang dipakai di querySelector?

Progres lesson naik setelah jawaban benar.

Coding practice

WajibDibuka di workspace khusus

Mengubah teks halaman dengan DOM

Latihan memilih elemen dan mengganti teks yang terlihat di preview.

Tujuan awal: Fokus di tab JS. HTML dan CSS sudah menyiapkan elemen yang perlu dipilih.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

4 cek otomatis3 checklist
Belum selesaiBuka practice

Ringkasan

Wajib
  • DOM membuat HTML bisa dibaca dan diubah oleh JavaScript.
  • document.querySelector memilih satu elemen dengan selector CSS.
  • textContent mengganti teks yang terlihat di dalam elemen.
  • Berikutnya, kamu akan membuat perubahan DOM terjadi setelah user melakukan action.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: JavaScript mulai menyentuh halaman.

Memuat progresReview module