Bagian 21: DOM (Document Object Model)

Apa itu DOM?

DOM (Document Object Model) adalah representasi struktur dokumen HTML atau XML dalam bentuk pohon objek. DOM memungkinkan bahasa pemrograman seperti JavaScript untuk mengakses dan memanipulasi elemen-elemen dalam halaman web secara dinamis.

Struktur DOM

Struktur DOM menyerupai pohon hierarki yang terdiri dari node-node. Setiap elemen HTML, atribut, dan teks dianggap sebagai node dalam pohon tersebut.

Mengakses Elemen DOM dengan JavaScript

Berikut beberapa metode umum untuk memilih elemen di DOM:

• document.getElementById("id") - memilih elemen berdasarkan id
• document.getElementsByClassName("kelas") - memilih elemen berdasarkan kelas
• document.querySelector("selector") - memilih elemen pertama yang cocok dengan selector CSS
• document.querySelectorAll("selector") - memilih semua elemen yang cocok dengan selector CSS

Manipulasi DOM

Kamu dapat mengubah isi, atribut, dan gaya elemen melalui JavaScript, misalnya:

const elem = document.getElementById("judul");
elem.textContent = "Judul Baru";
elem.style.color = "red";