### Manipulasi DOM (Document Object Model)
Manipulasi DOM adalah teknik untuk mengubah struktur HTML, gaya, atau konten halaman web secara dinamis menggunakan JavaScript. DOM merepresentasikan seluruh elemen HTML sebagai objek yang bisa diakses dan dimodifikasi.
#### 1. **Mengakses Elemen DOM**
Ada beberapa metode utama untuk mengakses elemen dalam DOM, yaitu:
- **`getElementById`**
- Mengambil elemen berdasarkan nilai atribut `id`.
- Mengembalikan satu elemen karena nilai `id` harus unik di seluruh halaman HTML.
**Contoh:**
```html
<div id="konten">Ini konten</div>
```
```javascript
let elemen = document.getElementById("konten");
console.log(elemen.innerText); // Ini konten
```
- **`getElementsByClassName`**
- Mengambil elemen berdasarkan nama kelas (`class`).
- Mengembalikan kumpulan elemen (HTMLCollection) yang memiliki kelas tersebut.
**Contoh:**
```html
<div class="item">Item 1</div>
<div class="item">Item 2</div>
```javascript
let elemen = document.getElementsByClassName("item");
console.log(elemen[0].innerText); // Item 1
- **`getElementsByTagName`**
- Mengambil elemen berdasarkan nama tag, misalnya `div`, `p`, atau `span`.
- Mengembalikan kumpulan elemen (HTMLCollection).
**Contoh:**
```html
<p>Paragraf 1</p>
<p>Paragraf 2</p>
```
```javascript
let paragraf = document.getElementsByTagName("p");
console.log(paragraf[1].innerText); // Paragraf 2
- **`querySelector`**
- Mengambil elemen pertama yang cocok dengan selektor CSS yang diberikan.
- Bisa digunakan untuk mengambil elemen dengan `id`, `class`, atau tag dengan sintaks CSS.
**Contoh:**
```html
<div id="konten">Ini konten</div>
```
```javascript
let elemen = document.querySelector("#konten");
console.log(elemen.innerText); // Ini konten
- **`querySelectorAll`**
- Mengambil semua elemen yang cocok dengan selektor CSS dan mengembalikannya sebagai NodeList.
**Contoh:**
```html
<div class="item">Item 1</div>
<div class="item">Item 2</div>
```
```javascript
let items = document.querySelectorAll(".item");
items.forEach(item => console.log(item.innerText));
#### 2. **Memanipulasi Elemen DOM**
Setelah elemen diambil, kita bisa memanipulasi konten atau tampilannya. Berikut beberapa properti dan metode yang digunakan untuk manipulasi DOM:
- **Mengubah teks atau konten HTML**:
- `innerText`: Mengubah teks dalam elemen.
- `innerHTML`: Mengubah konten HTML dalam elemen.
**Contoh:**
```javascript
let elemen = document.getElementById("konten");
elemen.innerText = "Teks baru"; // Mengubah teks
elemen.innerHTML = "<b>Teks dengan format HTML</b>"; // Mengubah HTML
- **Mengubah atribut**:
- `setAttribute()`: Menambahkan atau mengubah atribut elemen.
- `getAttribute()`: Mengambil nilai atribut dari elemen.
**Contoh:**
```javascript
let elemen = document.getElementById("konten");
elemen.setAttribute("style", "color: red"); // Mengubah warna teks menjadi merah
- **Mengubah gaya (CSS)**:
- `style`: Digunakan untuk mengubah gaya secara langsung pada elemen.
**Contoh:**
```javascript
elemen.style.backgroundColor = "yellow"; // Mengubah background menjadi kuning
#### 3. **Event Handling**
Event handling adalah cara JavaScript berinteraksi dengan aksi pengguna, seperti klik, hover, ketikan keyboard, dan lainnya. Untuk menangani event, kita dapat menggunakan event listeners.
##### Menambahkan Event Listener:
- **Event Listener**: Menggunakan `addEventListener()` untuk menambahkan event pada elemen tanpa mengubah HTML.
**Contoh:**
```javascript
let tombol = document.getElementById("tombol");
tombol.addEventListener("click", function() {
alert("Tombol diklik!");
});
Dalam contoh di atas, ketika tombol dengan `id="tombol"` diklik, pesan "Tombol diklik!" akan muncul.
##### Event yang Umum Digunakan:
- **`click`**: Untuk menangani klik pada elemen.
- **`mouseover`**: Untuk menangani ketika kursor berada di atas elemen.
- **`keyup`/`keydown`**: Untuk menangani saat tombol keyboard ditekan atau dilepas.
- **`submit`**: Untuk menangani pengiriman form.
##### Contoh Implementasi Event Handler:
```html
<button id="tombol">Klik saya!</button>
<script>
let tombol = document.getElementById("tombol");
tombol.addEventListener("click", function() {
document.body.style.backgroundColor = "lightblue"; // Mengubah warna latar saat tombol diklik
});
</script>
Dalam contoh ini, ketika tombol diklik, warna latar belakang halaman akan berubah menjadi biru muda.
#### 4. **Menghapus Event Listener**
Kita juga bisa menghapus event listener menggunakan `removeEventListener()`. Ini berguna ketika kita ingin menghentikan fungsi tertentu saat event terjadi.
**Contoh:**
```javascript
function ubahWarna() {
document.body.style.backgroundColor = "lightblue";
}
tombol.addEventListener("click", ubahWarna);
// Menghapus event listener
tombol.removeEventListener("click", ubahWarna);
### Kesimpulan
Manipulasi DOM adalah teknik untuk mengubah struktur HTML, gaya, atau konten halaman web secara dinamis menggunakan JavaScript. DOM merepresentasikan seluruh elemen HTML sebagai objek yang bisa diakses dan dimodifikasi.
#### 1. **Mengakses Elemen DOM**
Ada beberapa metode utama untuk mengakses elemen dalam DOM, yaitu:
- **`getElementById`**
- Mengambil elemen berdasarkan nilai atribut `id`.
- Mengembalikan satu elemen karena nilai `id` harus unik di seluruh halaman HTML.
**Contoh:**
```html
<div id="konten">Ini konten</div>
```
```javascript
let elemen = document.getElementById("konten");
console.log(elemen.innerText); // Ini konten
```
- **`getElementsByClassName`**
- Mengambil elemen berdasarkan nama kelas (`class`).
- Mengembalikan kumpulan elemen (HTMLCollection) yang memiliki kelas tersebut.
**Contoh:**
```html
<div class="item">Item 1</div>
<div class="item">Item 2</div>
```javascript
let elemen = document.getElementsByClassName("item");
console.log(elemen[0].innerText); // Item 1
- **`getElementsByTagName`**
- Mengambil elemen berdasarkan nama tag, misalnya `div`, `p`, atau `span`.
- Mengembalikan kumpulan elemen (HTMLCollection).
**Contoh:**
```html
<p>Paragraf 1</p>
<p>Paragraf 2</p>
```
```javascript
let paragraf = document.getElementsByTagName("p");
console.log(paragraf[1].innerText); // Paragraf 2
- **`querySelector`**
- Mengambil elemen pertama yang cocok dengan selektor CSS yang diberikan.
- Bisa digunakan untuk mengambil elemen dengan `id`, `class`, atau tag dengan sintaks CSS.
**Contoh:**
```html
<div id="konten">Ini konten</div>
```
```javascript
let elemen = document.querySelector("#konten");
console.log(elemen.innerText); // Ini konten
- **`querySelectorAll`**
- Mengambil semua elemen yang cocok dengan selektor CSS dan mengembalikannya sebagai NodeList.
**Contoh:**
```html
<div class="item">Item 1</div>
<div class="item">Item 2</div>
```
```javascript
let items = document.querySelectorAll(".item");
items.forEach(item => console.log(item.innerText));
#### 2. **Memanipulasi Elemen DOM**
Setelah elemen diambil, kita bisa memanipulasi konten atau tampilannya. Berikut beberapa properti dan metode yang digunakan untuk manipulasi DOM:
- **Mengubah teks atau konten HTML**:
- `innerText`: Mengubah teks dalam elemen.
- `innerHTML`: Mengubah konten HTML dalam elemen.
**Contoh:**
```javascript
let elemen = document.getElementById("konten");
elemen.innerText = "Teks baru"; // Mengubah teks
elemen.innerHTML = "<b>Teks dengan format HTML</b>"; // Mengubah HTML
- **Mengubah atribut**:
- `setAttribute()`: Menambahkan atau mengubah atribut elemen.
- `getAttribute()`: Mengambil nilai atribut dari elemen.
**Contoh:**
```javascript
let elemen = document.getElementById("konten");
elemen.setAttribute("style", "color: red"); // Mengubah warna teks menjadi merah
- **Mengubah gaya (CSS)**:
- `style`: Digunakan untuk mengubah gaya secara langsung pada elemen.
**Contoh:**
```javascript
elemen.style.backgroundColor = "yellow"; // Mengubah background menjadi kuning
#### 3. **Event Handling**
Event handling adalah cara JavaScript berinteraksi dengan aksi pengguna, seperti klik, hover, ketikan keyboard, dan lainnya. Untuk menangani event, kita dapat menggunakan event listeners.
##### Menambahkan Event Listener:
- **Event Listener**: Menggunakan `addEventListener()` untuk menambahkan event pada elemen tanpa mengubah HTML.
**Contoh:**
```javascript
let tombol = document.getElementById("tombol");
tombol.addEventListener("click", function() {
alert("Tombol diklik!");
});
Dalam contoh di atas, ketika tombol dengan `id="tombol"` diklik, pesan "Tombol diklik!" akan muncul.
##### Event yang Umum Digunakan:
- **`click`**: Untuk menangani klik pada elemen.
- **`mouseover`**: Untuk menangani ketika kursor berada di atas elemen.
- **`keyup`/`keydown`**: Untuk menangani saat tombol keyboard ditekan atau dilepas.
- **`submit`**: Untuk menangani pengiriman form.
##### Contoh Implementasi Event Handler:
```html
<button id="tombol">Klik saya!</button>
<script>
let tombol = document.getElementById("tombol");
tombol.addEventListener("click", function() {
document.body.style.backgroundColor = "lightblue"; // Mengubah warna latar saat tombol diklik
});
</script>
Dalam contoh ini, ketika tombol diklik, warna latar belakang halaman akan berubah menjadi biru muda.
#### 4. **Menghapus Event Listener**
Kita juga bisa menghapus event listener menggunakan `removeEventListener()`. Ini berguna ketika kita ingin menghentikan fungsi tertentu saat event terjadi.
**Contoh:**
```javascript
function ubahWarna() {
document.body.style.backgroundColor = "lightblue";
}
tombol.addEventListener("click", ubahWarna);
// Menghapus event listener
tombol.removeEventListener("click", ubahWarna);
### Kesimpulan
Manipulasi DOM memungkinkan kita untuk membuat halaman web yang interaktif dengan mengakses, memodifikasi, dan menangani elemen HTML secara dinamis. Dengan menggunakan metode seperti `getElementById`, `querySelector`, dan `addEventListener`, kita dapat mengontrol bagaimana pengguna berinteraksi dengan halaman, serta memperbarui tampilannya secara real-time.