Widget HTML #1

Beranda / JavaScript / Learn Javascript

Manipulasi DOM: Seni Membuat Halaman Webmu Hidup!

Posting Komentar

Halo, teman-teman! 😄

Apa kabar? Hari ini kita bakal belajar topik yang super seru di JavaScript, yaitu manipulasi DOM dan event handling. Jangan khawatir, meskipun kedengarannya rumit, sebenarnya topik ini asyik banget buat dipelajari, apalagi kalau teman-teman suka bikin halaman web jadi lebih interaktif dan dinamis.

Apa Itu DOM? 🤔

Jadi, teman-teman, DOM itu singkatan dari Document Object Model. Kalau kita buka halaman web dan lihat source code-nya (misalnya, klik kanan dan pilih "View Page Source"), kita akan lihat banyak kode HTML. Nah, DOM adalah representasi dari dokumen HTML kita yang dibuat oleh browser dalam bentuk objek.

Cara Manipulasi Elemen HTML dengan JavaScript

Manipulasi elemen HTML di DOM sebenarnya mudah banget, teman-teman. Ada beberapa metode umum yang sering kita pakai, misalnya:

  • getElementById: Menemukan elemen berdasarkan id.
  • querySelector: Menemukan elemen berdasarkan selektor CSS.
  • innerText dan innerHTML: Mengubah teks atau isi HTML di dalam elemen.
  • style: Mengubah gaya (CSS) elemen.

Mari kita coba buat contoh sederhana di mana kita akan mengubah teks paragraf setelah menekan tombol.

Contoh 1: Mengubah Teks dengan JavaScript


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manipulasi DOM - Ubah Teks</title>
</head>
<body>
    <h1>Manipulasi DOM dengan JavaScript</h1>
    <button id="gantiTeks">Klik aku!</button>
    <p id="pesan">Ini adalah paragraf yang bisa diubah.</p>

    <script>
        // Ambil elemen tombol dan paragraf
        const tombol = document.getElementById('gantiTeks');
        const paragraf = document.getElementById('pesan');

        // Tambahkan event listener pada tombol
        tombol.addEventListener('click', function() {
            paragraf.innerText = 'Teks paragraf sudah diubah!';
        });
    </script>
</body>
</html>

Event Handling: Ketika Halaman Webmu Mulai “Mendengar” 👂

Nah, sekarang kita lanjut ke event handling. Event adalah sesuatu yang terjadi pada halaman web, misalnya ketika user mengklik tombol, menggerakkan mouse, atau mengetik sesuatu. Event handling artinya kita menulis kode yang akan dijalankan saat event tertentu terjadi.

Contoh 2: Mengubah Warna Teks dengan Event


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manipulasi DOM - Ubah Warna Teks</title>
    <style>
        #pesan {
            font-size: 20px;
            color: black;
        }
    </style>
</head>
<body>
    <h1>Manipulasi DOM dengan Event</h1>
    <button id="ubahWarna">Ubah Warna Teks</button>
    <p id="pesan">Teks ini akan berubah warna saat kamu klik tombol.</p>

    <script>
        // Ambil elemen tombol dan paragraf
        const tombol = document.getElementById('ubahWarna');
        const paragraf = document.getElementById('pesan');

        // Tambahkan event listener pada tombol
        tombol.addEventListener('click', function() {
            // Acak warna dengan menggunakan kode warna RGB
            const warnaBaru = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;
            paragraf.style.color = warnaBaru;
        });
    </script>
</body>
</html>

Manipulasi DOM Lebih Lanjut: Menambah dan Menghapus Elemen 🛠️

Tidak hanya mengubah teks dan warna, kita juga bisa menambah atau menghapus elemen di DOM dengan JavaScript. Misalnya, jika teman-teman ingin menambahkan elemen baru setiap kali tombol diklik.

Contoh 3: Menambah Elemen Baru dengan JavaScript


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manipulasi DOM - Tambah Item</title>
</head>
<body>
    <h1>Manipulasi DOM: Menambah Elemen Baru</h1>
    <button id="tambahItem">Tambah Item</button>
    <ul id="daftarItem">
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>

    <script>
        // Ambil elemen tombol dan daftar item
        const tombol = document.getElementById('tambahItem');
        const daftar = document.getElementById('daftarItem');
        let itemCount = 2; // Mulai dari 2 karena sudah ada 2 item di awal

        // Tambahkan event listener pada tombol
        tombol.addEventListener('click', function() {
            itemCount++; // Tambah jumlah item
            const itemBaru = document.createElement('li'); // Buat elemen <li> baru
            itemBaru.textContent = `Item ${itemCount}`; // Beri teks pada elemen
            daftar.appendChild(itemBaru); // Tambahkan elemen baru ke daftar
        });
    </script>
</body>
</html>

Kesimpulan

Wah, seru banget ya, teman-teman! Sekarang kita sudah belajar banyak tentang manipulasi DOM dan event handling di JavaScript. Kita sudah belajar bagaimana mengambil elemen dari DOM, mengubah teks, warna, bahkan menambah elemen baru ke halaman web.

Manipulasi DOM dan event handling adalah salah satu aspek paling menarik dari JavaScript, karena ini yang membuat halaman web kita terasa hidup dan interaktif. Teman-teman bisa kembangkan lebih jauh lagi dengan membuat animasi, form yang dinamis, atau bahkan aplikasi web yang interaktif.

Selamat bereksperimen dan happy coding, teman-teman! 👨‍💻👩‍💻

List Part Artikel

Posting Komentar untuk "Manipulasi DOM: Seni Membuat Halaman Webmu Hidup!"

Posting Komentar