--- title: "Mengenal DOM Manipulation: Mengubah Tampilan Web dengan JavaScript" description: Kenali DOM manipulation dan cara JavaScript mengubah tampilan halaman web secara dinamis. Panduan dasar untuk membuat situs lebih interaktif dan responsif. image: https://msbu.co.id/hubfs/Imported_Blog_Media/61842-2.jpg --- [Skip to Content](https://msbu.co.id/blog/mengenal-dom-manipulation-mengubah-tampilan-web-dengan-javascript#body) [![MSBU Group](https://msbu.co.id/hs-fs/hubfs/W_Primary%20with%20no%20Slogan_No%20Bg2x.png?width=200&height=71&name=W_Primary%20with%20no%20Slogan_No%20Bg2x.png "MSBU Group")](https://msbu.co.id) Toggle Menu - Layanan Toggle children for Layanan - People Toggle children for People - [Managed Team, Headhunting & Frontier AI](https://msbu.co.id/id/layanan/managed-team-headhunting-frontier-ai) - Tech Toggle children for Tech - [Human Risk Management](https://sibermate.com) - [Device as a Service](https://msbu.co.id/id/layanan/daas) - Capital Toggle children for Capital - [Speed Pitching](https://msbu.co.id/layanan/speed-pitching) - [Komunitas](https://msbu.co.id/id/frc) - [Tentang](https://msbu.co.id/id/tentang) - Resources Toggle children for Resources - [AI CV Scoring](https://msbu.co.id/ai-cv-scoring) - [Blog](https://msbu.co.id/blog) - [Panduan Gaji](https://msbu.co.id/id/panduan-gaji) - [Konsultasi](https://msbu.co.id/meetings/msbu/consultation) [back to blog](https://msbu.co.id/blog) [Technology](https://msbu.co.id/blog/topic/tech) # Mengenal DOM Manipulation: Mengubah Tampilan Web dengan JavaScript Read Time **5 mins** | 16 Des 2024 | Written by: Hastin Lia [mailto:?subject=Mengenal%20DOM%20Manipulation%3A%20Mengubah%20Tampilan%20Web%20dengan%20JavaScript&body=https%3A%2F%2Fmsbu.co.id%2Fblog%2Fmengenal-dom-manipulation-mengubah-tampilan-web-dengan-javascript](mailto:?subject=Mengenal%20DOM%20Manipulation%3A%20Mengubah%20Tampilan%20Web%20dengan%20JavaScript&body=https%3A%2F%2Fmsbu.co.id%2Fblog%2Fmengenal-dom-manipulation-mengubah-tampilan-web-dengan-javascript) ![DOM ](https://msbu.co.id/hs-fs/hubfs/Imported_Blog_Media/61842-1024x683-2.jpg?width=1024&height=683&name=61842-1024x683-2.jpg "DOM ") Pengembangan web modern sangat bergantung pada interaktivitas yang dinamis. Salah satu cara untuk mencapainya adalah dengan menggunakan JavaScript untuk memanipulasi tampilan halaman web secara langsung. Teknologi yang memungkinkan hal ini disebut DOM (Document Object Model). Dalam artikel ini, kita akan membahas bagaimana DOM manipulation bekerja, mengapa penting, dan bagaimana Anda dapat memanfaatkannya untuk membuat halaman web yang lebih interaktif. **Baca juga: [Tools Populer untuk Business Analyst dalam Proyek IT](https://msbu.co.id/blog/tools-populer-untuk-business-analyst-dalam-proyek-it?lang=id)** ## Apa Itu DOM Manipulation? DOM manipulation merujuk pada proses mengubah atau memodifikasi struktur dan konten halaman web menggunakan JavaScript. DOM sendiri adalah representasi dari struktur HTML atau XML di dalam memori, yang memungkinkan Anda untuk mengakses dan mengubah elemen-elemen di halaman web secara dinamis. Dalam DOM, setiap elemen di halaman web, seperti tag \, \, atau \, diperlakukan sebagai objek yang dapat dimanipulasi dengan menggunakan metode JavaScript. Misalnya, dengan DOM manipulation, Anda bisa mengubah teks di dalam elemen HTML, mengganti atribut elemen, atau bahkan menambahkan elemen baru ke dalam halaman tanpa perlu memuat ulang halaman tersebut. Ini sangat berguna dalam pembuatan aplikasi web yang membutuhkan pembaruan konten secara real-time atau interaksi pengguna. ## Elemen Penting dalam DOM Untuk memahami lebih lanjut tentang DOM manipulation, kita perlu mempelajari elemen-elemen utama yang ada di dalamnya: - **Nodes:** Dalam DOM, hampir segala sesuatu adalah node. Terdapat beberapa jenis node: Element nodes: Representasi elemen HTML seperti \, \, atau \. Text nodes: Konten teks yang ada di dalam elemen HTML. Attribute nodes: Atribut HTML seperti id, class, dan src. - **DOM Tree:** DOM disusun dalam bentuk pohon (tree), di mana setiap elemen adalah sebuah node yang terhubung dengan node lainnya. Pohon ini dimulai dari root, yang biasanya adalah elemen \, dan setiap elemen HTML lainnya di dalamnya diwakili oleh cabang-cabang pohon. - **Element nodes**: Setiap elemen dalam HTML memiliki node yang terkait dengannya dalam DOM. Ini memungkinkan JavaScript untuk mengakses, memodifikasi, atau menghapus elemen-elemen tersebut. ## Metode DOM Manipulation dengan JavaScript Untuk melakukan DOM manipulation, JavaScript menyediakan berbagai metode yang memungkinkan kita untuk memilih, mengubah, menambah, atau menghapus elemen di dalam halaman web. ### 1. Mendapatkan Elemen (Selecting Elements) - getElementById(): Mengambil elemen berdasarkan ID-nya. - getElementsByClassName(): Mengambil semua elemen dengan kelas tertentu. - querySelector(): Mengambil elemen pertama yang sesuai dengan selector CSS yang diberikan (lebih fleksibel daripada getElementById() dan getElementsByClassName()). - querySelectorAll(): Mengambil semua elemen yang sesuai dengan selector CSS yang diberikan. Contoh: let element = document.getElementById("myElement"); ### 2. Mengubah Konten dan Atribut - innerHTML: Digunakan untuk mengubah atau mendapatkan HTML di dalam elemen. - textContent: Digunakan untuk mengubah atau mendapatkan teks di dalam elemen (tanpa HTML). - setAttribute(): Digunakan untuk mengubah atribut suatu elemen (misalnya, mengganti src pada elemen \). Contoh: element.innerHTML = "Teks baru!"; ### 3. Menambah, Menghapus, dan Memodifikasi Elemen - createElement(): Membuat elemen HTML baru. - appendChild(): Menambahkan elemen baru sebagai anak dari elemen yang sudah ada. - removeChild(): Menghapus elemen anak dari elemen yang sudah ada. Contoh: let newDiv = document.createElement("div"); newDiv.textContent = "Ini elemen baru!"; document.body.appendChild(newDiv); ### 4. Menangani Event dengan DOM - addEventListener(): Menambahkan event listener pada elemen untuk menangani event seperti klik, hover, dll. Contoh: let button = document.getElementById("myButton"); button.addEventListener("click", function() { alert("Tombol diklik!"); }); ## Contoh Praktis DOM Manipulation Untuk lebih memahami konsep DOM manipulation, berikut ini adalah contoh sederhana yang dapat Anda coba. **1. Mengubah Warna Latar Belakang Halaman** Misalnya, Anda ingin membuat tombol yang mengubah warna latar belakang halaman ketika diklik. Anda dapat melakukan ini dengan DOM manipulation menggunakan JavaScript: \