Mengenal struktur DOM di HTML, DOM, atau Document Object Model, adalah representasi struktur dokumen HTML yang memungkinkan kita untuk memanipulasi konten, struktur, dan gaya halaman web menggunakan JavaScript. Bisa dibilang, DOM ini adalah jembatan antara HTML statis dan interaktivitas di website.
Baca Juga : Sertifikasi Web Developer
Kenapa DOM Penting untuk Dipahami?
Kalau kamu ingin menjadi web developer, memahami struktur DOM itu wajib hukumnya. Soalnya, semua interaksi dinamis seperti klik tombol, form, dan efek animasi—terjadi lewat manipulasi DOM. Dengan kata lain, DOM adalah “wajah digital” dari halaman HTML yang bisa dibaca dan diubah oleh skrip.
1. Struktur Dasar DOM
Setiap dokumen HTML diubah oleh browser menjadi struktur pohon (tree structure) yang disebut DOM Tree. Di dalam tree ini, setiap elemen HTML menjadi node yang saling terhubung seperti akar, cabang, dan daun pada pohon.
2. Node Utama dalam DOM
DOM terdiri dari beberapa jenis node, tapi yang paling umum adalah:
- Document Node: akar dari seluruh dokumen.
- Element Node: elemen seperti <div>, <p>, <a>.
- Text Node: isi teks di dalam elemen.
- Attribute Node: atribut seperti id, class, href.
Hubungan Antar Elemen di DOM
Setiap elemen di DOM memiliki hubungan hierarki, seperti keluarga:
- Parent (Induk): elemen yang membungkus elemen lain.
- Child (Anak): elemen yang dibungkus oleh elemen lain.
- Sibling (Saudara): elemen yang berada di level yang sama.
Contoh Struktur DOM Sederhana
Di sini, <html> adalah root, <body> adalah child dari <html>, dan <h1> serta <p> adalah sibling dalam <body>.
Cara Mengakses DOM dengan JavaScript
Setelah tahu strukturnya, kamu bisa mulai mengakses dan memanipulasi DOM dengan JavaScript. Browser menyediakan berbagai API untuk ini.
Metode Umum untuk Seleksi DOM
- getElementById()
- getElementsByClassName()
- querySelector()
- querySelectorAll()
Contoh:
document.getElementById(“judul”).innerText = “Judul Baru”;
Modifikasi DOM Secara Dinamis
Setelah elemen berhasil diakses, kamu bisa mengubah konten, menambahkan elemen, atau menghapus elemen.
Contoh Modifikasi DOM
- const p = document.createElement(“p”);
- p.textContent = “Paragraf baru!”;
- document.body.appendChild(p);
Dengan kode di atas, kamu membuat node <p> baru dan menambahkannya ke dalam body halaman.
Kesimpulan
Mengenal struktur DOM di HTML adalah langkah awal yang penting untuk membuat website menjadi interaktif. Dengan memahami hierarki dan node-node dalam DOM, kamu bisa mulai memanipulasi tampilan dan perilaku halaman dengan JavaScript. DOM bukan sekadar teori ini adalah fondasi utama dalam pengembangan web modern. Yuk, eksplorasi lebih jauh dengan latihan langsung!
Leave a Reply