Javascript Dasar #11: DOM Manipulation

Halo, teman-teman! Kali ini kita akan membahas tentang DOM Manipulation atau cara kita berinteraksi dengan elemen-elemen HTML menggunakan JavaScript. DOM (Document Object Model) adalah representasi dari struktur halaman web yang memungkinkan kita untuk mengubah konten, struktur, dan gaya halaman web secara dinamis.

Apa Itu DOM?

DOM adalah struktur pohon yang menggambarkan elemen-elemen di halaman web sebagai objek JavaScript. Dengan menggunakan DOM, kita dapat memanipulasi elemen-elemen HTML, seperti mengubah teks, menambah atau menghapus elemen, atau mengubah gaya elemen di halaman web tanpa harus me-refresh halaman.

Mengakses Elemen dengan JavaScript

Untuk memanipulasi elemen-elemen HTML, kita perlu mengakses elemen tersebut terlebih dahulu. JavaScript menyediakan beberapa metode untuk mengakses elemen, seperti:

1. getElementById(): Mengambil elemen berdasarkan ID.
2. getElementsByClassName(): Mengambil elemen berdasarkan kelas.
3. getElementsByTagName(): Mengambil elemen berdasarkan tag HTML.
4. querySelector(): Mengambil elemen pertama yang cocok dengan selector CSS.
5. querySelectorAll(): Mengambil semua elemen yang cocok dengan selector CSS.

Contoh mengakses elemen dengan ID:

<p id="paragraf">Ini adalah paragraf yang akan diubah.</p>
<button id="ubahButton">Ubah Paragraf</button>

<script>
  let paragraf = document.getElementById("paragraf");
  let tombol = document.getElementById("ubahButton");

  tombol.addEventListener("click", function() {
    paragraf.textContent = "Paragraf ini telah diubah!";
  });
</script>

Pada contoh di atas:

• Kita menggunakan getElementById() untuk mengakses elemen dengan ID tertentu.
• Ketika tombol diklik, kita mengubah teks dalam elemen paragraf menggunakan textContent.

Mengubah Konten Elemen

Setelah kita berhasil mengakses elemen, kita bisa memodifikasi kontennya. Berikut beberapa cara untuk mengubah elemen dengan JavaScript:

1. textContent: Mengubah atau mengambil teks yang ada dalam elemen.
2. innerHTML: Mengubah atau mengambil HTML yang ada dalam elemen.
3. value: Mengubah atau mengambil nilai dari elemen form (seperti input, textarea).

Contoh mengganti konten dengan textContent:

let paragraf = document.getElementById("paragraf");
paragraf.textContent = "Konten paragraf ini telah diubah dengan JavaScript!";

Contoh mengganti HTML dengan innerHTML:

let kontainer = document.getElementById("kontainer");
kontainer.innerHTML = "<p>Ini adalah paragraf baru yang dimasukkan dengan innerHTML.</p>";

Menambah dan Menghapus Elemen

Dengan JavaScript, kita juga bisa menambah atau menghapus elemen HTML dari halaman. Kita bisa menggunakan beberapa metode seperti:

1. appendChild(): Menambahkan elemen baru sebagai anak dari elemen lain.
2. removeChild(): Menghapus elemen anak dari elemen lainnya.
3. createElement(): Membuat elemen baru.

Contoh menambah elemen baru:

let kontainer = document.getElementById("kontainer");
let paragrafBaru = document.createElement("p");
paragrafBaru.textContent = "Ini adalah paragraf yang baru ditambahkan!";
kontainer.appendChild(paragrafBaru);

Pada contoh ini, kita membuat elemen baru <p>, mengisinya dengan teks, dan kemudian menambahkannya ke dalam elemen dengan ID kontainer.

Contoh menghapus elemen:

let kontainer = document.getElementById("kontainer");
let paragraf = document.getElementById("paragraf");
kontainer.removeChild(paragraf); // Menghapus paragraf dari kontainer

Mengubah Gaya Elemen

Kita juga bisa mengubah gaya elemen menggunakan JavaScript dengan memanipulasi properti style. Misalnya, kita bisa mengubah warna latar belakang atau ukuran font elemen.

Contoh mengubah gaya elemen:

let paragraf = document.getElementById("paragraf");
paragraf.style.color = "red"; // Mengubah warna teks menjadi merah
paragraf.style.fontSize = "20px"; // Mengubah ukuran font menjadi 20px

Studi Kasus: Membuat To-Do List Sederhana

Note : Kalian bisa mempraktekannya di CodeLab dari code80vity

Mari kita coba membuat aplikasi To-Do List sederhana yang memungkinkan kita untuk menambah dan menghapus item.

HTML-nya:

<h1>To-Do List</h1>
<input type="text" id="todoInput" placeholder="Tambahkan to-do...">
<button id="addButton">Tambah</button>
<ul id="todoList"></ul>

<script src="script.js"></script>

JavaScript-nya (di file script.js):

let addButton = document.getElementById("addButton");
let todoInput = document.getElementById("todoInput");
let todoList = document.getElementById("todoList");

addButton.addEventListener("click", function() {
  if (todoInput.value !== "") {
    let li = document.createElement("li");
    li.textContent = todoInput.value;
    let deleteButton = document.createElement("button");
    deleteButton.textContent = "Hapus";
    deleteButton.addEventListener("click", function() {
      todoList.removeChild(li);
    });
    li.appendChild(deleteButton);
    todoList.appendChild(li);
    todoInput.value = ""; // Clear input after adding
  }
});

Penjelasan:

• Kita menambahkan item ke dalam <ul> setiap kali tombol Tambah diklik.
• Setiap item yang ditambahkan memiliki tombol Hapus untuk menghapus item dari daftar.

Dengan memahami DOM Manipulation, kamu bisa membuat halaman web yang lebih dinamis dan interaktif. Artikel ini sangat berguna sebelum kamu melanjutkan ke tutorial JavaScript selanjutnya di www.code80vity.com. Semoga dengan memanipulasi elemen HTML menggunakan JavaScript, kamu bisa menciptakan pengalaman pengguna yang lebih menarik!