JavaScript Extended #19: DOM Manipulation Dasar

1. Apa itu DOM?

DOM atau Document Object Model adalah representasi dokumen HTML dalam bentuk object yang bisa diakses dan dimanipulasi menggunakan JavaScript. Dengan DOM, kita bisa memilih elemen, mengubah teks, menambah class, mengubah style, bahkan membuat elemen baru secara dinamis.

2. Mengambil Elemen dari Halaman

Beberapa method yang sering dipakai untuk mengambil elemen DOM antara lain:

  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()
  • querySelector()
  • querySelectorAll()
const title = document.getElementById("title");
const card = document.querySelector(".card");
const items = document.querySelectorAll(".item");

3. Mengubah Konten Elemen

Kita bisa mengubah isi elemen menggunakan textContent atau innerHTML.

title.textContent = "Belajar DOM JavaScript";

card.innerHTML = "<strong>Konten baru</strong>";

textContent lebih aman jika hanya ingin mengisi teks biasa, sedangkan innerHTML dipakai jika ingin menyisipkan elemen HTML.

4. Mengubah Attribute dan Style

Selain isi elemen, kita juga bisa mengubah attribute dan style secara langsung.

const image = document.querySelector("img");

image.setAttribute("src", "/images/new-image.jpg");
image.setAttribute("alt", "Gambar baru");

title.style.color = "blue";
title.style.fontSize = "32px";

5. Menambah dan Menghapus Class

Untuk manipulasi class, gunakan classList.

card.classList.add("active");
card.classList.remove("hidden");
card.classList.toggle("open");

6. Membuat Elemen Baru

JavaScript juga bisa digunakan untuk membuat elemen baru lalu menambahkannya ke halaman.

const li = document.createElement("li");
li.textContent = "Item baru";

document.querySelector("ul").appendChild(li);

7. Menghapus Elemen

const oldItem = document.querySelector(".old-item");
oldItem.remove();

8. Ringkasan

  • DOM adalah representasi HTML dalam bentuk object
  • JavaScript dapat mengambil, mengubah, menambah, dan menghapus elemen
  • Manipulasi DOM adalah fondasi interaktivitas website
  • Method penting: querySelector, textContent, classList, createElement

Di part berikutnya, kita akan membahas event handling di JavaScript.