MENGGANTI ELEMEN - DOM

Fitur penting JavaScript yang membantu membuat situs web yang interaktif dan dinamis adalah kemampuan untuk merubah DOM (Document Object Model). Dalam tutorial ini, kita akan belajar bagaimana mengganti elemen dalam DOM menggunakan JavaScript.

Mencari Elemen dalam DOM

Sebelum kamu bisa mengubah elemen pada halaman web, kamu harus mencarinya terlebih dahulu. Untuk ini, JavaScript menyediakan beberapa metode, seperti getElementById() dan querySelector().

// Mencari elemen melalui id
var elemen = document.getElementById("myElement");

// Mencari elemen melalui CSS selector
var elemen = document.querySelector(".myElement");

Mengubah Konten Elemen

Setelah elemen telah ditemukan, kamu dapat mengubah kontennya dengan mengubah properti innerHTML atau textContent dari elemen tersebut.

// Mengubah HTML elemen
elemen.innerHTML = "<p>Teks baru</p>";

// Mengubah teks elemen
elemen.textContent = "Teks baru";

Menetapkan Atribut Elemen

Kamu juga dapat menetapkan atau mengubah atribut dari elemen HTML menggunakan metode setAttribute(). Metode ini menerima dua parameter: nama atribut dan nilai yang ingin ditetapkan.

// Menetapkan atribut kelas ke elemen
elemen.setAttribute("class", "newClass");

// Menetapkan atribut gaya ke elemen
elemen.setAttribute("style", "color:red");

Itulah cara sederhana untuk mengganti elemen dalam DOM menggunakan JavaScript. By menggabungkan pencarian elemen, perubahan konten, dan penentuan atribut, kamu dapat membuat situs web yang sangat interaktif dan menarik untuk pengguna.

Selamat mencoba dan berlatih agar menjadi lebih mahir!