Modul 21: DOM (Document Object Model)

DOM adalah singkatan dari Document Object Model, yaitu representasi struktur halaman web sebagai sebuah pohon objek yang dapat diakses dan dimanipulasi melalui bahasa pemrograman, seperti JavaScript.

Apa itu DOM?

DOM memungkinkan developer untuk mengakses, mengubah, menambah, atau menghapus elemen HTML dan konten halaman secara dinamis melalui JavaScript.

Struktur DOM

Halaman HTML diinterpretasikan browser sebagai pohon objek yang disebut DOM tree. Setiap elemen, atribut, dan teks adalah node dalam pohon ini.

Contoh Mengakses Elemen DOM

const heading = document.getElementById('judul');
console.log(heading.textContent);

Manipulasi DOM

Kamu dapat mengubah konten, atribut, gaya, atau struktur halaman menggunakan DOM, misalnya:

document.getElementById('judul').textContent = 'Judul Baru';
document.querySelector('p').style.color = 'red';

Beberapa Metode DOM yang Sering Digunakan

• getElementById() – Mengambil elemen berdasarkan ID
• getElementsByClassName() – Mengambil elemen berdasarkan class
• querySelector() – Mengambil elemen pertama yang cocok selector CSS
• querySelectorAll() – Mengambil semua elemen yang cocok selector CSS
• createElement() – Membuat elemen baru
• appendChild() – Menambahkan elemen anak
• removeChild() – Menghapus elemen anak

Dengan mempelajari DOM, kamu kini siap membuat halaman web yang responsif dan interaktif. Pada bagian lanjutan, kita akan mengeksplorasi lebih dalam tentang event dan manipulasi elemen secara dinamis.

Pertanyaan Umum seputar DOM

• Apa itu DOM? DOM adalah struktur data pohon yang merepresentasikan elemen-elemen dalam halaman HTML dan dapat dimanipulasi lewat JavaScript.
• Bagaimana cara mengubah teks di halaman lewat JavaScript? Gunakan document.getElementById("id").textContent = "Teks Baru";
• Apa bedanya getElementById dan querySelector? getElementById hanya mengambil berdasarkan ID, sementara querySelector bisa pakai selector CSS umum.