Apa itu DOM Javascript

Apa itu DOM dalam JavaScript?

DOM atau Document Object Model adalah konsep penting dalam JavaScript. DOM adalah sebuah model yang dibuat oleh browser web untuk mempresentasikan dokumen web. Setiap elemen pada halaman web, seperti tag HTML, atribut, dan teks, digambarkan sebagai objek dalam DOM.

Bagaimana DOM Bekerja?

Saat halaman web dimuat, browser akan membuat representasi objek dari struktur halaman tersebut dalam bentuk DOM. Objek-objek ini diatur dalam sebuah struktur yang disebut ‘tree’ atau pohon, karena bentuknya yang menyerupai pohon dengan cabang-cabang yang merujuk ke elemen-elemen dalam halaman web. Setiap objek dalam pohon DOM dikenal sebagai ‘node’.

Node pada DOM

Node adalah unit dasar dalam DOM. Ada beberapa jenis node dalam DOM, termasuk Element Node, Text Node, dan Attribute Node.

Element Node mewakili elemen HTML seperti <div>, <h1>, atau <p>.
Text Node mewakili teks yang ada di antara tag-tag HTML.
Attribute Node mewakili atribut atribut dari elemen HTML, seperti class, id, atau src.

Manipulasi DOM dengan JavaScript

Keuntungan terbesar DOM adalah kemampuannya untuk dimanipulasi. Kamu dapat menggunakan JavaScript untuk mengubah, menambahkan, atau menghapus node dalam DOM.

Berikut adalah contoh bagaimana kita dapat menggunakan JavaScript untuk mengubah teks dalam elemen HTML:

document.querySelector('h1').textContent = 'Judul Baru';

Pada contoh di atas, kita menggunakan metode querySelector untuk mengakses elemen <h1> dalam DOM, lalu mengubah kontennya dengan properti textContent.

Menambahkan Node Baru

Kamu juga bisa menambahkan node baru ke dalam DOM. Misalnya, kita bisa membuat elemen paragraf baru dan menambahkannya ke dalam elemen <body>:

var p = document.createElement('p');
p.textContent = 'Paragraf baru';
document.body.appendChild(p);

Menghapus Node

Untuk menghapus node dari DOM, kamu bisa menggunakan metode removeChild:

var p = document.querySelector('p');
p.parentNode.removeChild(p);

Dom JavaScript memungkinkan kamu untuk bekerja secara dinamis dengan konten halaman web, memberikan lebih banyak interaktivitas dan responsif kepada pengguna. Untuk mempelajari lebih lanjut, kamu bisa merujuk ke dokumentasi JavaScript DOM resmi.