Lihat sumber 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`:

<pre>
 <!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>
</pre>

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


==Pranala Menarik==

* [[Web Programming]]