Mengenal DOM dalam JavaScript

Apa Itu DOM?

DOM atau Document Object Model adalah sebuah standar yang digunakan untuk mengakses dan memanipulasi elemen-elemen di dalam halaman web. Dalam hal ini, DOM bertindak sebagai penghubung antara HTML (struktur halaman) dengan JavaScript (bahasa pemrograman yang berjalan di browser).

Dengan DOM, Anda bisa mengubah konten, gaya, dan struktur halaman web secara dinamis menggunakan JavaScript. Setiap elemen HTML yang ada di dalam halaman web direpresentasikan sebagai objek yang dapat diakses dan diubah melalui JavaScript.

Bagaimana Cara Kerja DOM?

DOM bekerja dengan merepresentasikan setiap elemen HTML sebagai sebuah pohon hierarki. Pohon ini terdiri dari nodes (simpul) yang saling terhubung satu sama lain. Setiap elemen HTML, seperti tag <div>, <p>, atau <h1>, dianggap sebagai node di dalam pohon DOM. Ini memungkinkan JavaScript untuk menjelajahi dan memanipulasi elemen-elemen tersebut.

Misalnya, jika Anda ingin mengubah teks dalam sebuah paragraf, Anda bisa menggunakan JavaScript untuk menemukan elemen <p> dan mengubah isinya. Begitu juga jika Anda ingin menambahkan atau menghapus elemen HTML di dalam halaman web.

Fungsi Utama DOM dalam JavaScript

1. Manipulasi Konten

DOM memungkinkan Anda untuk mengubah isi elemen HTML secara langsung. Contohnya, jika Anda ingin mengganti teks di dalam sebuah elemen paragraf (<p>), Anda bisa melakukannya dengan menggunakan JavaScript.

Contoh kode:

JS
copy.png
copy
document.getElementById("myParagraph").innerHTML = "Teks baru!";

Dalam contoh di atas, document.getElementById() digunakan untuk menemukan elemen dengan ID myParagraph, kemudian properti innerHTML digunakan untuk mengubah kontennya.

2. Mengubah Gaya (CSS)

Dengan DOM, Anda juga bisa memanipulasi gaya elemen, seperti mengubah warna, ukuran, atau tampilan elemen lain.

Contoh kode:

JS
copy.png
copy
document.getElementById("myDiv").style.backgroundColor = "blue";

Kode ini akan mengubah warna latar belakang elemen dengan ID myDiv menjadi biru.

3. Menambah atau Menghapus Elemen

Selain mengubah konten dan gaya, DOM juga memungkinkan Anda untuk menambah atau menghapus elemen HTML dari halaman secara dinamis.

Contoh menambahkan elemen:

JS
copy.png
copy
let newElement = document.createElement("p");
newElement.innerHTML = "Paragraf baru!";
document.body.appendChild(newElement);

Contoh menghapus elemen:

JS
copy.png
copy
let element = document.getElementById("myDiv");
element.remove();

Struktur Pohon DOM

Pohon DOM terdiri dari beberapa jenis node, termasuk:

Elemen Node: Setiap tag HTML adalah elemen node. Misalnya, <div>, <p>, dan <h1>.

Teks Node: Isi dari elemen-elemen tersebut, seperti teks di dalam paragraf atau heading, disebut teks node.

Atribut Node: Setiap atribut yang dimiliki oleh elemen HTML, seperti class atau id, direpresentasikan sebagai node atribut.

Metode Populer untuk Berinteraksi dengan DOM

Ada beberapa metode JavaScript yang sering digunakan untuk berinteraksi dengan DOM, di antaranya:

1. getElementById()

Metode ini digunakan untuk mencari elemen HTML berdasarkan ID-nya. Ini adalah salah satu metode yang paling sering digunakan karena ID adalah unik di dalam dokumen HTML.

Contoh:

JS
copy.png
copy
let element = document.getElementById("myElement");

2. getElementsByClassName()

Metode ini mencari elemen berdasarkan nama kelas (class). Metode ini akan mengembalikan koleksi semua elemen yang memiliki kelas tertentu.

Contoh:

JS
copy.png
copy
let elements = document.getElementsByClassName("myClass");

3. querySelector()

Metode ini lebih fleksibel karena bisa mencari elemen berdasarkan selektor CSS. Misalnya, Anda bisa mencari elemen berdasarkan ID, kelas, atau jenis elemen.

Contoh:

JS
copy.png
copy
let element = document.querySelector("#myId");

4. createElement()

Metode ini digunakan untuk membuat elemen HTML baru. Setelah dibuat, elemen ini bisa ditambahkan ke dalam dokumen dengan menggunakan metode lain seperti appendChild().

Contoh:

JS
copy.png
copy
let newElement = document.createElement("div");
newElement.innerHTML = "Ini adalah elemen baru!";
document.body.appendChild(newElement);

Kenapa DOM Penting untuk Pengembangan Web?

DOM sangat penting dalam pengembangan web karena memungkinkan halaman web menjadi lebih interaktif. Dengan DOM, Anda bisa membuat halaman yang responsif dan dinamis, di mana konten dapat berubah tanpa perlu memuat ulang seluruh halaman. Hal ini menjadi dasar dari banyak aplikasi web modern, termasuk aplikasi Single Page Application (SPA) seperti yang dibangun dengan React, Vue, atau Angular.

Kesimpulan

DOM merupakan komponen penting dalam pengembangan web modern. Dengan pemahaman yang baik tentang DOM dan cara memanipulasinya melalui JavaScript, Anda bisa menciptakan halaman web yang interaktif, dinamis, dan responsif. Dalam dunia pengembangan web, pemanfaatan DOM menjadi salah satu keterampilan yang sangat dibutuhkan.