Praktikum 5-Menambahkan JavaScript pada Website
25 Apr 2025 -
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.
-
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.
- Mengakses Elemen HTML
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.