Dom Javascript Adalah

3 min read Jun 19, 2024

DOM Javascript Adalah

Document Object Model (DOM) adalah representasi struktural dari halaman web yang memungkinkan JavaScript untuk mengakses dan memanipulasi konten, struktur, dan gaya halaman tersebut. Bayangkan DOM sebagai pohon yang setiap cabangnya mewakili elemen HTML pada halaman web.

Bagaimana Cara Kerja DOM?

Ketika browser mengunduh halaman web, ia membangun sebuah struktur data yang disebut DOM. Struktur ini mewakili setiap elemen HTML sebagai node, dan node-node tersebut terhubung satu sama lain melalui hubungan hierarkis.

Contoh:




  Contoh DOM


  Judul Halaman
  Ini adalah paragraf contoh.

Struktur DOM untuk kode di atas:


  
    Contoh DOM
  
  
    Judul Halaman
    Ini adalah paragraf contoh.

Penjelasan:

Elemen html adalah node root dari DOM.
Node head dan body adalah anak dari node html.
Node title adalah anak dari node head.
Node h1 dan p adalah anak dari node body.

Apa yang bisa dilakukan dengan DOM?

Dengan DOM, JavaScript dapat:

Mengakses dan mengubah konten elemen: Mengubah teks, menambahkan atau menghapus konten, dll.
Mengubah struktur elemen: Menambahkan, menghapus, atau memindahkan elemen HTML.
Mengubah gaya elemen: Mengubah warna, ukuran font, posisi, dll.
Menangani event: Bereaksi terhadap interaksi pengguna seperti klik, mouseover, dll.

Contoh Penggunaan DOM:

// Mengubah konten elemen h1
const judul = document.querySelector('h1');
judul.textContent = 'Judul Halaman yang Diubah';

// Menambahkan elemen baru
const paragrafBaru = document.createElement('p');
paragrafBaru.textContent = 'Ini adalah paragraf yang baru ditambahkan.';
document.body.appendChild(paragrafBaru);

// Mengubah gaya elemen p
const paragraf = document.querySelector('p');
paragraf.style.color = 'red';
paragraf.style.fontSize = '20px';

Penting untuk Diingat:

DOM adalah representasi dari HTML yang di-load browser, bukan HTML itu sendiri.
Perubahan pada DOM akan langsung tercermin pada halaman web.
DOM dapat dimanipulasi dengan metode dan properti yang disediakan oleh JavaScript.

Memahami DOM adalah langkah penting dalam mempelajari JavaScript untuk web. Dengan memanfaatkan DOM, Anda dapat membuat halaman web yang dinamis dan interaktif.

Dom Javascript Adalah