Study
JavaScript

DOM Manipulation Dasar di JavaScript

Penjelasan

DOM (Document Object Model) adalah representasi halaman HTML yang bisa diakses dan diubah lewat JavaScript. Dengan DOM API, JavaScript bisa memilih elemen (document.querySelector), mengubah isinya, dan merespons interaksi pengguna lewat event listener (addEventListener). Ini yang membedakan JavaScript dari bahasa lain di daftar ini — kode ini hanya jalan di dalam browser, bukan lewat Node.js.

Contoh Konsep

// Anggap ada <button id="tombolku">Klik</button> di HTML
const tombol = document.querySelector("#tombolku");

tombol.addEventListener("click", () => {
    tombol.textContent = "Sudah diklik!";
});

// Mengubah style lewat JavaScript
tombol.style.color = "blue";

Praktikum

Bayangkan ada <p id="pesan">Halo</p> di HTML. Tulis kode yang memilih elemen itu dengan querySelector, lalu ubah textContent-nya jadi "Selamat belajar JavaScript!".

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Kode yang mengakses document/window hanya bisa jalan di browser, bukan di Node.js polos — kalau kamu menguji kode DOM, jalankan lewat file HTML + browser, bukan lewat node app.js.