Manipulasi DOM (Document Object Model)
Untuk memahami manipulasi DOM (Document Object Model) menggunakan JavaScript, berikut adalah modul yang mencakup konsep dasar dan contoh praktis. Kita akan menggunakan alat yang tersedia di Ubuntu 24.04 tanpa bergantung pada Microsoft Code.
1. Persiapan Lingkungan
Manipulasi DOM dilakukan di dalam browser, sehingga Anda memerlukan browser web seperti Firefox atau Chromium yang sudah terinstal di Ubuntu 24.04. Selain itu, Anda memerlukan editor teks seperti `nano`, `gedit`, atau `vim` untuk menulis kode JavaScript dan HTML.
2. Konsep Dasar DOM
DOM adalah representasi struktur dokumen HTML dalam bentuk pohon yang memungkinkan JavaScript untuk berinteraksi dan memanipulasi elemen-elemen pada halaman web. Setiap elemen HTML direpresentasikan sebagai node dalam pohon DOM.
3. Membuat File HTML dan JavaScript
Buat file HTML baru bernama `index.html` menggunakan editor teks pilihan Anda:
nano index.html
Tambahkan kode berikut ke dalam `index.html`:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Manipulasi DOM</title>
</head>
<body>
<h1 id="judul">Selamat Datang</h1>
<p class="deskripsi">Ini adalah contoh paragraf.</p>
<button id="ubahTeks">Ubah Teks</button>
<button id="tambahParagraf">Tambah Paragraf</button>
<script src="script.js"></script>
</body>
</html>
File ini berisi elemen-elemen dasar seperti judul, paragraf, dan dua tombol yang akan kita manipulasi menggunakan JavaScript.
Selanjutnya, buat file JavaScript baru bernama `script.js`:
nano script.js
Tambahkan kode berikut ke dalam `script.js`:
// Mengakses elemen berdasarkan ID
const judul = document.getElementById('judul');
// Mengakses elemen berdasarkan kelas
const deskripsi = document.querySelector('.deskripsi');
// Mengubah teks elemen
document.getElementById('ubahTeks').addEventListener('click', function() {
judul.textContent = 'Teks Judul Telah Diubah';
deskripsi.textContent = 'Teks paragraf juga telah diubah.';
});
// Menambahkan elemen baru ke dalam DOM
document.getElementById('tambahParagraf').addEventListener('click', function() {
const paragrafBaru = document.createElement('p');
paragrafBaru.textContent = 'Ini adalah paragraf tambahan.';
document.body.appendChild(paragrafBaru);
});
4. Penjelasan Kode
- Mengakses Elemen DOM: Kita menggunakan `document.getElementById` untuk mengakses elemen berdasarkan ID dan `document.querySelector` untuk mengakses elemen berdasarkan kelas.
- Mengubah Konten Elemen: Dengan menambahkan event listener pada tombol "Ubah Teks", kita dapat mengubah teks dari elemen `h1` dan paragraf saat tombol diklik.
- Menambahkan Elemen Baru: Tombol "Tambah Paragraf" menambahkan paragraf baru ke dalam body dokumen setiap kali diklik.
5. Menjalankan Kode
Untuk melihat hasilnya, buka terminal dan navigasikan ke direktori tempat file `index.html` disimpan. Kemudian, jalankan perintah berikut untuk membuka file di browser:
xdg-open index.html
Halaman web akan terbuka di browser default Anda. Cobalah klik tombol "Ubah Teks" dan "Tambah Paragraf" untuk melihat efek dari manipulasi DOM yang telah kita buat.
6. Sumber Belajar Tambahan
Untuk memperdalam pemahaman tentang manipulasi DOM, Anda dapat merujuk pada sumber berikut:
- [Introduction to the DOM | DigitalOcean](https://www.digitalocean.com/community/tutorials/introduction-to-the-dom)
- [How To Access Elements in the DOM | DigitalOcean](https://www.digitalocean.com/community/tutorials/how-to-access-elements-in-the-dom)
- [How to Manipulate the DOM - the Ultimate Beginner's Guide | freeCodeCamp](https://www.freecodecamp.org/news/how-to-manipulate-the-dom-beginners-guide/)
Dengan memahami dan mempraktikkan contoh di atas, Anda akan lebih mahir dalam melakukan manipulasi DOM menggunakan JavaScript di lingkungan Ubuntu 24.04