Manipulasi DOM

DOM (Document Object Model) adalah representasi struktur halaman web dalam bentuk pohon (tree) yang memungkinkan JavaScript untuk mengakses dan memanipulasi elemen HTML secara dinamis.

Mengakses Elemen DOM

JavaScript menyediakan beberapa metode untuk memilih elemen:

1. document.getElementById(id) → Memilih elemen berdasarkan ID.

   let title = document.getElementById("judul");
   console.log(title.innerText); // Menampilkan teks dalam elemen dengan id "judul"
   

2. document.querySelector(selector) → Memilih elemen berdasarkan selector CSS pertama yang ditemukan.

   let paragraf = document.querySelector(".paragraf");
   

3. document.querySelectorAll(selector) → Memilih semua elemen yang sesuai dengan selector CSS.

   let listItems = document.querySelectorAll("li");
   

Mengubah Konten dan Atribut

Setelah elemen didapatkan, kita bisa mengubah isinya:

• Mengubah teks

  title.innerText = "Judul Baru";
  

• Mengubah HTML dalam elemen

  title.innerHTML = "<strong>Judul Baru</strong>";
  

• Mengubah atribut

  let link = document.querySelector("a");
  link.setAttribute("href", "https://www.example.com");
  

Manipulasi Gaya (CSS)

Kita bisa mengubah gaya elemen langsung menggunakan JavaScript:

title.style.color = "red";
title.style.fontSize = "24px";

Menambah dan Menghapus Elemen

• Menambah elemen baru

  let newElement = document.createElement("p");
  newElement.innerText = "Ini paragraf baru";
  document.body.appendChild(newElement);
  

• Menghapus elemen

  let item = document.querySelector(".item");
  item.remove();
  

Event Listener

Event listener memungkinkan kita menangani interaksi pengguna, seperti klik atau input.

let button = document.querySelector("button");
button.addEventListener("click", function () {
    alert("Tombol diklik!");
});

Kesimpulan

Manipulasi DOM memungkinkan perubahan dinamis pada tampilan website. Dengan memahami cara memilih, mengubah, dan menambahkan elemen, kita bisa membuat halaman yang lebih interaktif dan responsif.