Secara sederhana, DOM memungkinkan developer untuk:<\/p>\n
- \n
- \n
Mengubah konten halaman tanpa memuat ulang.<\/p>\n<\/li>\n
- \n
Menambahkan atau menghapus elemen HTML secara dinamis.<\/p>\n<\/li>\n
- \n
Mengatur gaya (style<\/em>) menggunakan JavaScript.<\/p>\n<\/li>\n
- \n
Menanggapi interaksi pengguna seperti klik, scroll, atau input teks.<\/p>\n<\/li>\n<\/ul>\n
\n
Singkatnya: DOM adalah jembatan antara kode HTML dan JavaScript, yang membuat halaman web bisa \u201chidup\u201d.<\/p>\n<\/blockquote>\n
Struktur DOM<\/h3>\n
DOM menyusun dokumen web menjadi struktur pohon (tree structure) yang terdiri dari node<\/em> dan object<\/em>.
Setiap elemen HTML seperti<div><\/code>,<p><\/code>,<img><\/code>, atau<a><\/code> dianggap sebagai sebuah node dalam pohon DOM.<\/p>\nContoh struktur sederhana:<\/p>\n
\n\n\n<\/div>\n<\/div>\n<\/div>\n<html<\/span><\/span>>
\n <head<\/span><\/span>>
\n <title<\/span><\/span>>Belajar DOM<\/title<\/span><\/span>>
\n <\/head<\/span><\/span>>
\n <body<\/span><\/span>>
\n <h1<\/span><\/span>>Halo Dunia!<\/h1<\/span><\/span>>
\n <p<\/span><\/span>>Selamat datang di pembelajaran DOM.<\/p<\/span><\/span>>
\n <\/body<\/span><\/span>>
\n<\/html<\/span><\/span>>
\n<\/code><\/div>\n<\/div>\nAkan direpresentasikan oleh DOM sebagai:<\/p>\n
\n\n\n<\/div>\n<\/div>\n<\/div>\nDocument
\n \u2514\u2500\u2500 html<\/span>
\n \u251c\u2500\u2500 head
\n \u2502 \u2514\u2500\u2500 title
\n \u2514\u2500\u2500 body<\/span>
\n \u251c\u2500\u2500 h1<\/span>
\n \u2514\u2500\u2500 p<\/span>
\n<\/code><\/div>\n<\/div>\nDengan struktur seperti ini, JavaScript dapat mengakses setiap elemen HTML menggunakan node.<\/p>\n
Berikut ini contoh diagram diagram pohon DOM:\u00a0<\/em><\/strong><\/p>\n
<\/p>\n
Fungsi DOM<\/h3>\n
Berikut beberapa fungsi utama DOM dalam pengembangan website:<\/p>\n
- \n
- \n
Mengubah Konten Halaman<\/strong><\/p>\n
- \n
- \n
DOM memungkinkan JavaScript untuk mengganti teks, gambar, atau elemen lain secara dinamis.<\/p>\n
\n\n\n<\/div>\n<\/div>\n<\/div>\ndocument<\/span>.getElementById<\/span>(\"judul\"<\/span>).innerText<\/span> = \"Selamat Datang di Dunia DOM!\"<\/span>;
\n<\/code><\/div>\n<\/div>\n<\/li>\n<\/ul>\n<\/li>\n- \n
Mengatur Gaya (CSS) Secara Dinamis<\/strong><\/p>\n
- \n
- \n
Kamu bisa menambahkan efek visual tanpa mengubah file CSS.<\/p>\n
\n\n\n<\/div>\n<\/div>\n<\/div>\ndocument<\/span>.querySelector<\/span>(\"p\"<\/span>).style<\/span>.color<\/span> = \"blue\"<\/span>;
\n<\/code><\/div>\n<\/div>\n<\/li>\n<\/ul>\n<\/li>\n- \n
Menangani Event<\/strong><\/p>\n
- \n
- \n
DOM bisa merespons interaksi pengguna seperti klik tombol, mengetik, atau menggulir halaman.<\/p>\n
\n\n\n<\/div>\n<\/div>\n<\/div>\ndocument<\/span>.querySelector<\/span>(\"button\"<\/span>).addEventListener<\/span>(\"click\"<\/span>, function<\/span>() {
\n alert<\/span>(\"Tombol diklik!\"<\/span>);
\n});
\n<\/code><\/div>\n<\/div>\n<\/li>\n<\/ul>\n<\/li>\n- \n
Menambah atau Menghapus Elemen<\/strong><\/p>\n
- \n
- \n
Dengan DOM, kamu dapat menambahkan elemen baru ke halaman.<\/p>\n
\n\n\n<\/div>\n<\/div>\n<\/div>\nconst<\/span> baru = document<\/span>.createElement<\/span>(\"div\"<\/span>);
\nbaru.innerText<\/span> = \"Elemen baru!\"<\/span>;
\ndocument<\/span>.body<\/span>.appendChild<\/span>(baru);
\n<\/code><\/div>\n<\/div>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\nCara Kerja DOM<\/h3>\n
Prosesnya dimulai saat browser memuat halaman web:<\/p>\n
- \n
- \n
Browser membaca file HTML dari server.<\/p>\n<\/li>\n
- \n
File tersebut dikonversi menjadi struktur pohon DOM.<\/p>\n<\/li>\n
- \n
JavaScript kemudian dapat mengakses dan memodifikasi pohon DOM sesuai instruksi.<\/p>\n<\/li>\n
- \n
Perubahan pada DOM akan langsung terlihat secara real-time di halaman pengguna.<\/p>\n<\/li>\n<\/ol>\n
Dengan mekanisme ini, halaman web dapat bereaksi terhadap tindakan pengguna tanpa perlu memuat ulang seluruh halaman.<\/p>\n
Contoh Manipulasi DOM<\/h3>\n
Berikut contoh sederhana penggunaan DOM dalam JavaScript:<\/p>\n
\n\n\n<\/div>\n<\/div>\n<\/div>\n
- \n
- \n
- \n
- \n
- \n
- \n