Praktikum 5 - Belajar Menambahkan JavaScript pada Website

25 Apr 2025 - Hamijaannn

Penjelasan mengenai Fundamental JavaScript DOM (Document Object Model)

📚 Fundamental JavaScript DOM (Document Object Model)

DOM adalah cara JavaScript untuk berinteraksi dengan HTML dan mengubah tampilan halaman secara dinamis.

🧱 1. Apa itu DOM?

DOM (Document Object Model) adalah representasi struktur HTML dalam bentuk objek yang bisa diakses dan dimanipulasi oleh JavaScript.

Contoh HTML:

html

Halo Dunia!

Dengan JavaScript, kita bisa mengakses `<p>` tersebut dan mengubah isinya.

---

## 🔍 2. Mengakses Elemen HTML

### a. `getElementById()`

```javascript
let elemen = document.getElementById("teks");

b. getElementsByClassName()

let elemen = document.getElementsByClassName("kelas");

c. getElementsByTagName()

let elemen = document.getElementsByTagName("p");

d. querySelector() (mengambil elemen pertama yang cocok)

let elemen = document.querySelector("#teks");
 // pakai CSS selector

e. querySelectorAll() (mengambil semua elemen yang cocok)

let elemen = document.querySelectorAll("p");

✍️ 3. Mengubah Konten HTML

a. innerHTML

document.getElementById("teks").innerHTML = "Teks baru";

b. textContent (lebih aman dari script injection)

document.getElementById("teks").textContent = "Teks aman";

🎨 4. Mengubah Gaya (CSS)

let elemen = document.getElementById("teks");
elemen.style.color = "red";
elemen.style.fontSize = "20px";

🎛️ 5. Mengubah Atribut

let link = document.getElementById("mylink");
link.setAttribute("href", "https://google.com");
link.getAttribute("href"); // mengambil nilai atribut

➕ 6. Menambahkan atau Menghapus Elemen

a. Membuat elemen baru

let paragraf = document.createElement("p");
paragraf.textContent = "Ini paragraf baru!";
document.body.appendChild(paragraf);

b. Menghapus elemen

let elemen = document.getElementById("hapus");
elemen.remove();

🖱️ 7. Event Listener (klik, hover, dll)

let tombol = document.getElementById("klikSaya");
tombol.addEventListener("click", function() {
  alert("Tombol diklik!");
});

✅ Tips Tambahan

• Manipulasi DOM sering digunakan untuk membuat website interaktif.
• Jangan lupa menunggu sampai halaman selesai dimuat (DOMContentLoaded):

document.addEventListener("DOMContentLoaded", function() {
  // kode JavaScript DOM kamu di sini
});

📌 Kesimpulan

• DOM adalah jembatan antara HTML dan JavaScript.
• Kita bisa ambil elemen, ubah isi, ubah gaya, tambahkan event, dll.
• Sangat penting untuk membuat halaman web jadi interaktif.

\