DOM (Document Object Model) adalah salah satu fitur inti dalam bahasa pemrograman JavaScript yang memungkinkan pengembang web untuk memanipulasi dan mengubah konten HTML, CSS, dan bahasa markup lainnya secara dinamis. Dalam artikel ini, kita akan membahas DOM JavaScript dan cara menggunakannya untuk memanipulasi HTML.


DOM adalah representasi struktur dokumen HTML sebagai model objek dalam memori. DOM menyediakan cara untuk mengakses, memanipulasi, dan mengubah elemen HTML dengan menggunakan JavaScript. Setiap elemen HTML pada halaman web dapat diakses melalui objek DOM, dan properti serta metodenya dapat digunakan untuk memanipulasi elemen tersebut.

Cara Mengakses Elemen HTML Menggunakan DOM

Untuk mengakses elemen HTML menggunakan DOM, Anda dapat menggunakan metode getElementById(), getElementsByTagName(), atau getElementsByClassName(). Berikut ini adalah contoh kode untuk mengakses elemen HTML menggunakan metode getElementById():

javascript
var elemen = document.getElementById("nama-elemen");

Di mana "nama-elemen" adalah ID dari elemen HTML yang ingin diakses. Setelah elemen HTML diakses, properti dan metodenya dapat digunakan untuk memanipulasi elemen tersebut.

Cara Memanipulasi Elemen HTML Menggunakan DOM

Setelah elemen HTML diakses menggunakan DOM, Anda dapat memanipulasi propertinya untuk mengubah atribut, mengubah isi teks, atau mengubah style. Berikut ini adalah contoh kode untuk mengubah isi teks dari elemen HTML:

javascript
var elemen = document.getElementById("nama-elemen");
elemen.innerHTML = "Ini adalah isi teks yang baru.";

Selain itu, DOM juga dapat digunakan untuk menambahkan atau menghapus elemen HTML. Berikut ini adalah contoh kode untuk menambahkan elemen HTML:

javascript
var elemenBaru = document.createElement("div");
elemenBaru.innerHTML = "Ini adalah elemen baru.";
document.body.appendChild(elemenBaru);

Contoh kode di atas akan membuat elemen HTML baru yang berisi teks "Ini adalah elemen baru" dan menambahkannya ke akhir elemen body.

DOM juga dapat digunakan untuk menghapus elemen HTML. Berikut ini adalah contoh kode untuk menghapus elemen HTML:

javascript
var elemen = document.getElementById("nama-elemen");
elemen.parentNode.removeChild(elemen);

Contoh kode di atas akan menghapus elemen HTML yang memiliki ID "nama-elemen".

Kesimpulan

DOM JavaScript adalah fitur inti dalam bahasa pemrograman JavaScript yang memungkinkan pengembang web untuk memanipulasi dan mengubah konten HTML, CSS, dan bahasa markup lainnya secara dinamis. Dengan menggunakan DOM, pengembang web dapat mengakses dan memanipulasi elemen HTML menggunakan metode dan properti, serta menambahkan atau menghapus elemen HTML.