Pengenalan DOM (Document Object Model) dalam JavaScript

- October 04, 2024

Apa itu DOM?

DOM adalah singkatan dari Document Object Model. Ini adalah representasi struktur dokumen HTML atau XML sebagai objek yang dapat dimanipulasi dengan bahasa pemrograman seperti JavaScript. DOM memungkinkan kamu untuk mengakses dan memanipulasi elemen-elemen di halaman web secara dinamis.

Struktur DOM

DOM mengorganisir elemen-elemen dalam bentuk pohon. Setiap elemen dalam dokumen adalah node. Berikut adalah beberapa jenis node dalam DOM:

Element Node: Node yang mewakili elemen HTML.
Text Node: Node yang mewakili teks di dalam elemen.
Attribute Node: Node yang mewakili atribut dari elemen HTML.

Mengakses Elemen dengan DOM

JavaScript menyediakan beberapa metode untuk mengakses elemen dalam DOM:

getElementById

Mengakses elemen berdasarkan ID.

javascript
const element = document.getElementById('myId');

getElementsByClassName
- Mengakses elemen berdasarkan nama kelas. Mengembalikan koleksi elemen.
```
javascript
const elements = document.getElementsByClassName('myClass');
```
getElementsByTagName
- Mengakses elemen berdasarkan nama tag. Juga mengembalikan koleksi.
```
javascript
const elements = document.getElementsByTagName('div');
```

querySelector

Mengakses elemen pertama yang cocok dengan selector CSS.

javascript
const element = document.querySelector('.myClass');

querySelectorAll

Mengakses semua elemen yang cocok dengan selector CSS.

javascript
const elements = document.querySelectorAll('div.myClass');

Manipulasi DOM

Setelah mengakses elemen, kamu bisa melakukan berbagai manipulasi:

Mengubah Konten

Mengubah teks atau HTML dari elemen.

javascript
element.textContent = 'Hello, World!';
element.innerHTML = '<strong>Hello, World!</strong>';

Mengubah Atribut

Mengubah atribut elemen.

javascript
element.setAttribute('src', 'image.jpg');

Menambah dan Menghapus Elemen

Menambahkan elemen baru.

javascript
const newElement = document.createElement('div');
newElement.textContent = 'This is a new element';
document.body.appendChild(newElement);

Menghapus elemen.

javascript
document.body.removeChild(element);

Mengubah Gaya (CSS)

Mengubah gaya elemen secara langsung.

javascript
element.style.color = 'red';
element.style.fontSize = '20px';

Menangani Event

Menambahkan event listener untuk merespons interaksi pengguna.

javascript
element.addEventListener('click', () => {
    alert('Element clicked!');
});

Contoh Penggunaan

Berikut adalah contoh sederhana yang menunjukkan penggunaan DOM dalam JavaScript:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Example</title>
</head>
<body>
    <h1 id="title">Hello, DOM!</h1>
    <button id="changeButton">Change Text</button>

    <script>
        const title = document.getElementById('title');
        const button = document.getElementById('changeButton');

        button.addEventListener('click', () => {
            title.textContent = 'Text Changed!';
            title.style.color = 'blue';
        });
    </script>
</body>
</html>

Kesimpulan

DOM adalah alat yang sangat kuat dalam pengembangan web, memungkinkan pengembang untuk membuat halaman web interaktif dan dinamis. Dengan memahami cara mengakses dan memanipulasi DOM menggunakan JavaScript, kamu dapat meningkatkan pengalaman pengguna di situs webmu.

Search This Blog

Belajar Web Medan