Cara Kerja Manipulasi DOM dalam JavaScript

Manipulasi DOM adalah salah satu keterampilan dasar yang harus dikuasai oleh setiap pengembang web. Dengan memahami cara kerja DOM, kita bisa dengan mudah mengubah struktur dan konten halaman web secara dinamis. Dalam artikel ini, kita akan menjelajahi berbagai teknik untuk melakukan manipulasi DOM menggunakan JavaScript. Yuk, kita mulai petualangan kita dalam dunia DOM!

Baca Juga: Eksplorasi Library Javascript dalam Pengembangan Web

Pengantar ke Manipulasi DOM

DOM atau Document Object Model adalah representasi struktur halaman web yang dapat dimanipulasi oleh JavaScript. Dengan DOM, kita bisa mengakses dan memodifikasi elemen HTML secara programatik. Ini memungkinkan kita untuk membuat halaman web yang interaktif dan dinamis, seperti mengubah teks, gambar, dan lainnya.

Salah satu cara untuk berinteraksi dengan DOM adalah dengan menggunakan metode `querySelector` atau `getElementById`. Metode ini memungkinkan kita untuk memilih elemen tertentu di halaman dan mengubahnya sesuai kebutuhan. Misalnya, untuk mengubah teks dalam sebuah elemen dengan id “judul”, kita bisa menggunakan kode berikut:

document.getElementById("judul").textContent = "Selamat Datang di Dunia DOM!";

Manipulasi DOM sangat penting dalam pengembangan web modern karena memungkinkan halaman berinteraksi dengan pengguna secara real-time. Dengan memadukan teknik manipulasi DOM dan callback, kita bisa menciptakan pengalaman pengguna yang lebih responsif dan menarik. Callback dalam JavaScript sangat membantu untuk memastikan bahwa manipulasi DOM terjadi setelah elemen tertentu dimuat atau ketika suatu event terjadi.

Baca Juga: Mendalami Penggunaan Callback dalam Javascript

Menggunakan Query Selector

Query Selector adalah salah satu metode yang sangat berguna dalam manipulasi DOM. Dengan metode ini, kita bisa memilih elemen HTML berdasarkan selektor CSS yang kita tentukan. Misalnya, untuk memilih elemen dengan kelas “konten”, kita bisa menggunakan kode berikut:

let elemenKonten = document.querySelector(".konten");

Setelah elemen dipilih, kita bisa melakukan berbagai manipulasi, seperti mengubah teks atau gaya elemen tersebut. Misalnya, untuk mengubah warna teks elemen yang kita pilih sebelumnya menjadi biru, kita bisa menambahkan kode ini:

elemenKonten.style.color = "blue";

Selain memilih satu elemen, kita juga bisa menggunakan `querySelectorAll` untuk memilih beberapa elemen sekaligus. Metode ini akan mengembalikan NodeList yang mirip dengan array, sehingga kita bisa melakukan iterasi untuk memanipulasi setiap elemen. Contohnya, untuk mengubah warna teks semua elemen dengan kelas “item”, kita bisa menggunakan kode berikut:

let elemenItem = document.querySelectorAll(".item");
elemenItem.forEach(item => {
  item.style.color = "green";
});

Baca Juga: Menguasai Javascript untuk Pemula dalam Waktu Singkat

Membuat dan Menyisipkan Elemen

Menambahkan elemen baru ke halaman web bisa membuat situs lebih interaktif dan dinamis. Kita dapat membuat elemen baru menggunakan metode `createElement` dari dokumen. Setelah elemen dibuat, kita bisa menambahkan teks atau elemen anak ke dalamnya. Contohnya, untuk membuat elemen paragraf baru dengan teks, kita bisa menggunakan kode berikut:

let paragrafBaru = document.createElement("p");
paragrafBaru.textContent = "Ini adalah paragraf baru.";

Setelah elemen baru dibuat, kita perlu menambahkannya ke dalam DOM. Metode `appendChild` memungkinkan kita untuk menyisipkan elemen baru ke dalam elemen induk yang sudah ada. Misalnya, untuk menambahkan paragraf baru ke dalam elemen dengan id “kontainer”, kita bisa menggunakan kode berikut:

let kontainer = document.getElementById("kontainer");
kontainer.appendChild(paragrafBaru);

Selain `appendChild`, kita juga bisa menggunakan `insertBefore` jika ingin menambahkan elemen baru sebelum elemen tertentu. Ini memberi kita kontrol lebih besar atas posisi elemen baru di dalam struktur DOM. Misalnya, untuk menambahkan paragraf baru sebelum elemen dengan id “target”, kita bisa menggunakan kode berikut:

let target = document.getElementById("target");
kontainer.insertBefore(paragrafBaru, target);

Baca Juga: Pengenalan Next JS Bagi Pemula Panduan Awal

Mengubah Properti dan Atribut

Manipulasi properti dan atribut elemen HTML memungkinkan kita untuk mengubah tampilan dan perilaku elemen tersebut. Misalnya, kita bisa mengubah teks, gaya, atau bahkan atribut khusus seperti `src` pada elemen gambar. Contohnya, untuk mengubah teks dari elemen dengan id “judul”, kita bisa menggunakan kode berikut:

let judul = document.getElementById("judul");
judul.textContent = "Judul Baru yang Menarik";

Mengubah gaya elemen bisa dilakukan dengan mengakses properti `style` dari elemen tersebut. Kita bisa mengatur warna, ukuran font, margin, dan banyak lagi. Misalnya, untuk mengubah warna latar belakang dari elemen dengan kelas “konten” menjadi kuning, kita bisa menambahkan kode berikut:

let konten = document.querySelector(".konten");
konten.style.backgroundColor = "yellow";

Selain mengubah properti, kita juga bisa memanipulasi atribut elemen HTML. Misalnya, untuk mengubah URL pada elemen link dengan id “tautan”, kita bisa menggunakan metode `setAttribute` seperti ini:

let tautan = document.getElementById("tautan");
tautan.setAttribute("href", "https://contoh.com");

Callback dalam JavaScript sering digunakan untuk memastikan perubahan pada DOM terjadi setelah elemen tertentu dimuat atau event tertentu terjadi. Dengan callback, kita bisa memastikan bahwa manipulasi DOM terjadi pada saat yang tepat, memberikan pengalaman pengguna yang lebih baik.

Baca Juga: Panduan Pengisian Select Otomatis dengan JS

Menghapus dan Mengganti Elemen

Dalam pengembangan web, kadang kita perlu menghapus elemen yang tidak lagi diperlukan. Untuk menghapus elemen dari DOM, kita bisa menggunakan metode `removeChild` atau `remove`. Misalnya, untuk menghapus elemen dengan id “iklan”, kita bisa menulis kode seperti ini:

let iklan = document.getElementById("iklan");
iklan.parentNode.removeChild(iklan);

Mengganti elemen juga sering dilakukan saat elemen tersebut perlu diubah secara drastis. Kita bisa menggunakan metode `replaceChild` untuk mengganti satu elemen dengan elemen lainnya. Contohnya, untuk mengganti elemen paragraf dengan id “paragrafLama” dengan elemen baru, kita bisa menggunakan kode berikut:

let paragrafBaru = document.createElement("p");
paragrafBaru.textContent = "Ini adalah paragraf yang baru.";
let paragrafLama = document.getElementById("paragrafLama");
paragrafLama.parentNode.replaceChild(paragrafBaru, paragrafLama);

Dalam penggunaan callback, kita bisa memastikan bahwa elemen dihapus atau diganti setelah event tertentu terjadi. Misalnya, kita bisa menunggu hingga pengguna mengklik tombol sebelum menghapus elemen tertentu. Hal ini dapat dicapai dengan kode berikut:

let tombol = document.getElementById("hapusTombol");
tombol.addEventListener("click", function() {
  let elemen = document.getElementById("elemenHapus");
  elemen.remove();
});

Baca Juga: Pemahaman Sintaks JavaScript untuk Pemula

Dengan memahami manipulasi DOM, kita bisa membuat halaman web yang lebih interaktif dan dinamis, mulai dari mengubah teks, gaya, hingga menambahkan atau menghapus elemen. Menggunakan metode seperti `querySelector` dan `createElement`, serta mengintegrasikan Javascript Callback, kita dapat memastikan manipulasi DOM terjadi pada saat yang tepat. Hal ini memungkinkan pengalaman pengguna yang lebih baik dan situs yang lebih responsif.

Referensi:

• Introduction to the DOM: Mozilla Developer Network (MDN)
• JavaScript and the DOM: W3Schools
• Manipulating the DOM with JavaScript: FreeCodeCamp
• Using querySelector and querySelectorAll: MDN Web Docs
• JavaScript DOM Methods: GeeksforGeeks
• Understanding the JavaScript Call Stack: DigitalOcean