Sandy Kalamuddin's Blog
Memahami Manipulasi DOM (Document Object Model) di JavaScript

Memahami Manipulasi DOM (Document Object Model) di JavaScript

Sandy Kalamuddin's photo
Sandy Kalamuddin
·

2 min read

Table of contents

Manipulasi DOM (Document Object Model) adalah salah satu konsep kunci dalam pengembangan web dengan JavaScript. DOM mewakili struktur dokumen HTML atau XML sebagai objek yang dapat dimanipulasi, sehingga memungkinkan pengembang untuk membuat perubahan dinamis pada halaman web. Dalam artikel ini, kita akan menjelajahi konsep dasar manipulasi DOM dan beberapa teknik yang umum digunakan.

1. Mengakses Elemen

Langkah pertama dalam manipulasi DOM adalah mengakses elemen-elemen di dalam halaman web. Anda dapat melakukan ini dengan menggunakan metode getElementById, getElementsByClassName, atau getElementsByTagName.

Contoh:

// Mengakses elemen dengan id tertentu
const header = document.getElementById('header');

// Mengakses elemen dengan kelas tertentu
const paragraphs = document.getElementsByClassName('paragraph');

// Mengakses elemen dengan tag tertentu
const images = document.getElementsByTagName('img');

2. Manipulasi Konten

Setelah mengakses elemen, Anda dapat memanipulasi konten mereka, seperti mengubah teks, menambahkan atau menghapus elemen, atau mengubah atribut.

Contoh:

// Mengubah teks dalam elemen
header.textContent = 'Selamat Datang';

// Menambahkan elemen baru
const newParagraph = document.createElement('p');
newParagraph.textContent = 'Ini adalah paragraf baru';
document.body.appendChild(newParagraph);

// Mengubah atribut
const myImage = document.getElementById('my-image');
myImage.src = 'new-image.jpg';

3. Manipulasi Gaya (Styling)

Anda juga dapat memanipulasi gaya elemen untuk mengubah tata letak dan tampilan halaman web.

Contoh:

// Mengubah warna latar belakang elemen
header.style.backgroundColor = 'blue';

// Mengubah ukuran font
paragraphs[0].style.fontSize = '18px';

// Menyembunyikan elemen
images[0].style.display = 'none';

4. Menanggapi Peristiwa (Event Handling)

Manipulasi DOM seringkali melibatkan menanggapi peristiwa, seperti klik mouse atau pengiriman formulir. Anda dapat menambahkan event listener ke elemen untuk menanggapi peristiwa tersebut.

Contoh:

// Menambahkan event listener untuk mengganti teks header saat diklik
header.addEventListener('click', function() {
    header.textContent = 'Teks telah berubah!';
});

5. Iterasi dan Pemrosesan

Dalam beberapa kasus, Anda mungkin perlu melakukan manipulasi pada beberapa elemen secara bersamaan. Anda dapat menggunakan loop untuk mengiterasi melalui kumpulan elemen dan melakukan operasi yang diinginkan.

Contoh:

// Mengubah teks semua paragraf menjadi huruf kapital
for (let i = 0; i < paragraphs.length; i++) {
    paragraphs[i].textContent = paragraphs[i].textContent.toUpperCase();
}

Manipulasi DOM adalah keterampilan penting yang harus dikuasai setiap pengembang web. Dengan memahami konsep dasar dan teknik yang dijelaskan di atas, Anda dapat membuat halaman web yang dinamis dan responsif menggunakan JavaScript. Selamat belajar dan mengembangkan!

#BarengSandkalam
😁

JavaScriptWeb Development