Difference between revisions of "Manipulasi DOM (Document Object Model)"

From OnnoWiki
Jump to navigation Jump to search
(Created page with "Untuk memahami manipulasi DOM (Document Object Model) menggunakan JavaScript, berikut adalah modul yang mencakup konsep dasar dan contoh praktis. Kita akan menggunakan alat ya...")
 
Line 1: Line 1:
−
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.
+
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**
+
'''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.
+
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**
+
'''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.
+
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**
+
'''3. Membuat File HTML dan JavaScript'''
  
−
Buat file HTML baru bernama `index.html` menggunakan editor teks pilihan Anda:
+
Buat file HTML baru bernama `index.html` menggunakan editor teks pilihan Anda:
  
−
```bash
+
nano index.html
−
nano index.html
 
−
```
 
−
 
  
−
Tambahkan kode berikut ke dalam `index.html`:
+
Tambahkan kode berikut ke dalam `index.html`:
  
−
```html
+
<!DOCTYPE html>
−
<!DOCTYPE html>
+
<html lang="id">
−
<html lang="id">
+
<head>
−
<head>
+
    <meta charset="UTF-8">
−
    <meta charset="UTF-8">
+
    <title>Manipulasi DOM</title>
−
    <title>Manipulasi DOM</title>
+
</head>
−
</head>
+
<body>
−
<body>
+
    <h1 id="judul">Selamat Datang</h1>
−
    <h1 id="judul">Selamat Datang</h1>
+
    <p class="deskripsi">Ini adalah contoh paragraf.</p>
−
    <p class="deskripsi">Ini adalah contoh paragraf.</p>
+
    <button id="ubahTeks">Ubah Teks</button>
−
    <button id="ubahTeks">Ubah Teks</button>
+
    <button id="tambahParagraf">Tambah Paragraf</button>
−
    <button id="tambahParagraf">Tambah Paragraf</button>
+
    <script src="script.js"></script>
 +
</body>
 +
</html>
  
−
    <script src="script.js"></script>
+
File ini berisi elemen-elemen dasar seperti judul, paragraf, dan dua tombol yang akan kita manipulasi menggunakan JavaScript.
−
</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`:
  
−
Selanjutnya, buat file JavaScript baru bernama `script.js`:
+
nano script.js
  
−
```bash
+
Tambahkan kode berikut ke dalam `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);
 +
});
  
−
```javascript
+
'''4. Penjelasan Kode'''
−
// Mengakses elemen berdasarkan ID
 
−
const judul = document.getElementById('judul');
 
  
−
// Mengakses elemen berdasarkan kelas
+
* '''Mengakses Elemen DOM''': Kita menggunakan `document.getElementById` untuk mengakses elemen berdasarkan ID dan `document.querySelector` untuk mengakses elemen berdasarkan kelas.
−
const deskripsi = document.querySelector('.deskripsi');
+
* '''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.
  
−
// Mengubah teks elemen
+
'''5. Menjalankan Kode'''
−
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
+
Untuk melihat hasilnya, buka terminal dan navigasikan ke direktori tempat file `index.html` disimpan. Kemudian, jalankan perintah berikut untuk membuka file di browser:
−
document.getElementById('tambahParagraf').addEventListener('click', function() {
 
−
    const paragrafBaru = document.createElement('p');
 
−
    paragrafBaru.textContent = 'Ini adalah paragraf tambahan.';
 
−
    document.body.appendChild(paragrafBaru);
 
−
});
 
−
```
 
−
 
  
−
**4. Penjelasan Kode**
+
xdg-open index.html
  
−
- **Mengakses Elemen DOM**: Kita menggunakan `document.getElementById` untuk mengakses elemen berdasarkan ID dan `document.querySelector` untuk mengakses elemen berdasarkan kelas.
+
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.
  
−
- **Mengubah Konten Elemen**: Dengan menambahkan event listener pada tombol "Ubah Teks", kita dapat mengubah teks dari elemen `h1` dan paragraf saat tombol diklik.
+
'''6. Sumber Belajar Tambahan'''
  
−
- **Menambahkan Elemen Baru**: Tombol "Tambah Paragraf" menambahkan paragraf baru ke dalam body dokumen setiap kali diklik.
+
Untuk memperdalam pemahaman tentang manipulasi DOM, Anda dapat merujuk pada sumber berikut:
  
−
**5. Menjalankan Kode**
+
* [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/)
  
−
Untuk melihat hasilnya, buka terminal dan navigasikan ke direktori tempat file `index.html` disimpan. Kemudian, jalankan perintah berikut untuk membuka file di browser:
+
Dengan memahami dan mempraktikkan contoh di atas, Anda akan lebih mahir dalam melakukan manipulasi DOM menggunakan JavaScript di lingkungan Ubuntu 24.04
  
−
```bash
 
−
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.
+
==Pranala Menarik==
  
−
**6. Sumber Belajar Tambahan**
+
* [[Web Programming]]
−
 
 
−
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 tanpa memerlukan Microsoft Code.
 

Revision as of 18:55, 6 April 2025

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>

Selamat Datang

Ini adalah contoh paragraf.

    <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:

Dengan memahami dan mempraktikkan contoh di atas, Anda akan lebih mahir dalam melakukan manipulasi DOM menggunakan JavaScript di lingkungan Ubuntu 24.04


Pranala Menarik

Retrieved from "https://onnocenter.or.id/wiki/index.php?title=Manipulasi_DOM_(Document_Object_Model)&oldid=72370"