DOM di JavaScript dan Cara manipulasinya

PreviousParameter dan Return Value dalam JavaScript NextEvent Handling dalam JavaScript

Last updated 10 months ago

DOM di JavaScript dan Cara manipulasinya

Apa itu DOM?

DOM (Document Object Model) adalah antarmuka pemrograman untuk dokumen web. Ini mewakili halaman sehingga program dapat mengubah struktur, gaya, dan kontennya. DOM menggambarkan dokumen sebagai pohon node, di mana setiap node mewakili bagian dari dokumen, seperti elemen, atribut, atau teks.

Struktur DOM

Dokumen: Representasi seluruh halaman.
Elemen: Setiap tag HTML adalah elemen dalam DOM.
Atribut: Properti elemen seperti id, class, dll.
Teks: Isi teks dari elemen.

Manipulasi DOM

Manipulasi DOM adalah proses menggunakan JavaScript untuk mengubah struktur, konten, atau gaya dari elemen di halaman web. Berikut adalah beberapa operasi umum yang dapat dilakukan pada DOM:

Mengakses Elemen
Mengubah Konten Elemen
Menambah dan Menghapus Elemen
Mengubah Atribut Elemen
Mengubah Gaya Elemen

Contoh Kode HTML dan JavaScript untuk Manipulasi DOM

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manipulasi DOM</title>
</head>
<body>
    <h1 id="title">Hello, World!</h1>
    <p id="description">Ini adalah paragraf yang akan dimanipulasi.</p>
    <button id="changeContent">Ubah Konten</button>
    <button id="addElement">Tambah Elemen</button>
    <button id="removeElement">Hapus Elemen</button>
    <button id="changeStyle">Ubah Gaya</button>

    <script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

document.addEventListener('DOMContentLoaded', (event) => {
    // Mengakses Elemen
    const title = document.getElementById('title');
    const description = document.getElementById('description');
    
    // Mengubah Konten Elemen
    document.getElementById('changeContent').addEventListener('click', () => {
        title.textContent = 'Hello, DOM!';
        description.textContent = 'Paragraf ini telah diubah menggunakan JavaScript.';
    });
    
    // Menambah Elemen
    document.getElementById('addElement').addEventListener('click', () => {
        const newElement = document.createElement('p');
        newElement.textContent = 'Ini adalah elemen baru yang ditambahkan.';
        document.body.appendChild(newElement);
    });
    
    // Menghapus Elemen
    document.getElementById('removeElement').addEventListener('click', () => {
        if (description) {
            description.remove();
        }
    });
    
    // Mengubah Gaya Elemen
    document.getElementById('changeStyle').addEventListener('click', () => {
        title.style.color = 'blue';
        title.style.fontSize = '2em';
    });
});

Penjelasan Kode

Mengakses Elemen:

const title = document.getElementById('title');
const description = document.getElementById('description');

Menggunakan getElementById untuk mengakses elemen dengan ID title dan description.

Mengubah Konten Elemen:

document.getElementById('changeContent').addEventListener('click', () => {
    title.textContent = 'Hello, DOM!';
    description.textContent = 'Paragraf ini telah diubah menggunakan JavaScript.';
});

Menambahkan event listener pada tombol changeContent untuk mengubah teks elemen title dan description.

Menambah Elemen:

document.getElementById('addElement').addEventListener('click', () => {
    const newElement = document.createElement('p');
    newElement.textContent = 'Ini adalah elemen baru yang ditambahkan.';
    document.body.appendChild(newElement);
});

Menambahkan event listener pada tombol addElement untuk membuat dan menambahkan elemen baru ke dalam body.

Menghapus Elemen:

document.getElementById('removeElement').addEventListener('click', () => {
    if (description) {
        description.remove();
    }
});

Menambahkan event listener pada tombol removeElement untuk menghapus elemen description dari dokumen.

Mengubah Gaya Elemen:

document.getElementById('changeStyle').addEventListener('click', () => {
    title.style.color = 'blue';
    title.style.fontSize = '2em';
});

Menambahkan event listener pada tombol changeStyle untuk mengubah warna dan ukuran font elemen title.

Sumber

Manipulasi DOM memungkinkan Anda untuk membuat halaman web yang dinamis dan interaktif dengan menggunakan JavaScript untuk mengubah elemen HTML secara langsung.