Profile Picture

Praktikum 5-Menambahkan JavaScript pada Website

25 Apr 2025 -

Penjelasan mengenai fundamental JavaScript DOM (Document Object Model)

Contoh HTML:

html

Halo Dunia!

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

a. getElementById()

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");

- Mengubah Konten HTML

a. innerHTML
document.getElementById("teks").innerHTML = "Teks baru";
b. textContent (lebih aman dari script injection)
document.getElementById("teks").textContent = "Teks aman";

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

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

- 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();

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