Manipulasi DOM (Document Object Model) adalah proses mengubah struktur, gaya, atau konten halaman web menggunakan JavaScript. DOM adalah representasi hierarkis dari elemen HTML dalam sebuah dokumen, yang memungkinkan JavaScript untuk berinteraksi dengan elemen-elemen tersebut. Berikut adalah beberapa contoh manipulasi DOM yang umum dilakukan menggunakan JavaScript:
### 1. Mendapatkan Elemen Berdasarkan ID:
Anda dapat menggunakan `document.getElementById()` untuk mendapatkan elemen HTML berdasarkan ID-nya.
```javascript
var elemen = document.getElementById("elemenID");
```
### 2. Mengubah Konten Elemen:
Anda dapat menggunakan properti `innerHTML` atau `innerText` untuk mengubah konten sebuah elemen.
```javascript
elemen.innerHTML = "Konten baru";
```
### 3. Menambahkan atau Menghapus Elemen:
Anda dapat membuat elemen baru, menambahkannya ke dalam dokumen, atau menghapus elemen yang ada.
```javascript
// Membuat elemen baru
var elemenBaru = document.createElement("div");
// Menambahkan elemen baru ke dalam dokumen
document.body.appendChild(elemenBaru);
// Menghapus elemen
elemen.parentNode.removeChild(elemen);
```
### 4. Menambahkan dan Menghapus Atribut:
Anda dapat menambahkan atau menghapus atribut dari elemen HTML.
```javascript
// Menambahkan atribut
elemen.setAttribute("class", "kotak");
// Menghapus atribut
elemen.removeAttribute("class");
```
### 5. Menangani Event:
Anda dapat menambahkan event listener ke elemen HTML untuk menangani event tertentu, seperti klik mouse atau pengiriman formulir.
```javascript
// Menambahkan event listener
elemen.addEventListener("click", function() {
console.log("Elemen diklik!");
});
```
### 6. Mengubah Gaya (CSS):
Anda dapat mengubah gaya elemen HTML dengan mengakses properti `style`.
```javascript
// Mengubah gaya
elemen.style.backgroundColor = "blue";
elemen.style.color = "white";
```
### Contoh Lengkap:
Berikut adalah contoh lengkap penggunaan manipulasi DOM dalam JavaScript:
```html
<!DOCTYPE html>
<html>
<body>
<h2 id="judul">Manipulasi DOM dengan JavaScript</h2>
<button onclick="ubahWarna()">Ubah Warna Teks</button>
<script>
function ubahWarna() {
document.getElementById("judul").style.color = "red";
}
</script>
</body>
</html>
```
Dalam contoh ini, ketika tombol ditekan, fungsi `ubahWarna()` dijalankan dan mengubah warna teks pada elemen dengan ID "judul" menjadi merah.
Manipulasi DOM adalah keterampilan penting dalam pengembangan web menggunakan JavaScript. Dengan menggunakan metode ini, Anda dapat membuat halaman web yang dinamis dan responsif yang memberikan pengalaman pengguna yang lebih baik.
No comments:
Post a Comment