DOM (Document Object Model) merupakan istilah yang sering muncul dalam dunia pengembangan website terutama saat membahas mengenai JavaScript dan manipulasi halaman web. Bagi pemula, DOM mungkin terdengar teknis, namun sebenarnya konsep ini sangat penting untuk dipahami.<\/p>\n
DOM (Document Object Model) adalah representasi struktur dokumen HTML atau XML dalam bentuk objek yang dapat diakses dan dimanipulasi menggunakan bahasa pemrograman seperti JavaScript.<\/p>\n
Dengan kata lain, DOM mengubah elemen-elemen HTML (seperti Contoh sederhana:<\/p>\n Melalui DOM, elemen tersebut bisa diakses dengan JavaScript:<\/p>\n DOM memiliki peran yang sangat penting dalam pengembangan website modern. Berikut beberapa fungsi utamanya:<\/p>\n DOM memungkinkan JavaScript untuk berinteraksi langsung dengan struktur halaman web.<\/p>\n Anda bisa mengubah teks, gambar, atau elemen lainnya tanpa perlu reload halaman.<\/p>\n Contoh:<\/p>\n DOM memungkinkan developer mengatur struktur HTML secara dinamis, seperti:<\/p>\n DOM digunakan untuk menangani event seperti:<\/p>\n Contoh:<\/p>\n DOM direpresentasikan dalam bentuk struktur pohon (tree). Setiap elemen HTML dianggap sebagai node.<\/p>\n Contoh struktur:<\/p>\n Struktur DOM:<\/p>\n Jenis node dalam DOM:<\/p>\n Berikut alur sederhana cara kerja DOM:<\/p>\n Jadi, setiap perubahan yang dilakukan JavaScript melalui DOM akan langsung terlihat tanpa harus reload halaman.<\/p>\n Banyak yang mengira DOM sama dengan HTML, padahal keduanya berbeda:<\/p>\n<div><\/code>, <p><\/code>, <h1><\/code>) menjadi objek yang bisa diubah, dihapus, atau ditambahkan secara dinamis.<\/p>\nFungsi DOM dalam Website<\/h2>\n
1. Menghubungkan HTML dengan JavaScript<\/h3>\n
2. Memanipulasi Konten<\/h3>\n
\n
3. Mengatur Struktur Halaman<\/h3>\n
\n
<li><\/code> pada daftar<\/li>\n4. Mengelola Event<\/h3>\n
\n
\nalert<\/span>(“Tombol diklik!”<\/span>);
\n});<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\nStruktur DOM (Tree Structure)<\/h2>\n
\n<body><\/span>
\n<h1><\/span>Judul<\/h1><\/span>
\n<p><\/span>Paragraf<\/p><\/span>
\n<\/body><\/span>
\n<\/html><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n
\n
\n
\n
\n
Cara Kerja DOM<\/h2>\n
\n
Contoh Manipulasi DOM<\/h2>\n
<\/h4>\n
Mengubah Konten<\/strong><\/h4>\n
<\/h4>\n
Mengubah Style<\/strong><\/h4>\n
<\/h4>\n
Menambahkan Elemen<\/strong><\/h4>\n
\nelemenBaru<\/span>.<\/span>textContent =<\/span> “Paragraf baru”<\/span>;
\ndocument<\/span>.<\/span>body.<\/span>appendChild(elemenBaru<\/span>);<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/h4>\n
Menghapus Elemen<\/strong><\/h4>\n
Perbedaan DOM vs HTML<\/h2>\n