Manipulasi DOM (Document Object Model) dalam JavaScript

Manipulasi DOM (Document Object Model) dalam JavaScript merujuk pada kemampuan untuk mengubah struktur, gaya, dan konten dari elemen-elemen HTML pada halaman web secara dinamis. DOM adalah representasi hierarkis dari elemen-elemen HTML yang memungkinkan JavaScript berinteraksi dengan elemen-elemen tersebut.

Berikut adalah beberapa contoh umum manipulasi DOM yang dapat dilakukan menggunakan JavaScript:

Pemilihan Elemen: Anda dapat memilih elemen-elemen HTML menggunakan metode getElementById, getElementsByClassName, getElementsByTagName, atau querySelector. Setelah memilih elemen, Anda dapat mengakses dan memanipulasi atribut, konten, atau gaya elemen tersebut.

Mengubah Konten: Anda dapat mengubah konten dari elemen HTML, seperti mengubah teks pada elemen paragraf atau mengganti gambar pada elemen img. Anda dapat mengakses dan memodifikasi properti innerHTML atau innerText elemen untuk melakukan perubahan ini.

Menambahkan dan Menghapus Elemen: Anda dapat membuat elemen baru menggunakan createElement dan menambahkannya ke DOM menggunakan metode seperti appendChild atau insertBefore. Anda juga dapat menghapus elemen menggunakan removeChild.

Mengubah Gaya Tampilan: Anda dapat mengubah gaya tampilan elemen menggunakan JavaScript. Anda dapat mengakses dan memodifikasi properti style dari elemen tersebut, seperti mengubah warna latar belakang, ukuran font, atau posisi elemen.

Menangani Peristiwa: JavaScript memungkinkan Anda untuk menangani peristiwa seperti mengklik tombol, mengisi formulir, atau menggulir halaman. Anda dapat menambahkan penanganan peristiwa (event listener) pada elemen-elemen untuk merespons aksi pengguna.

Memanipulasi Kelas CSS: Anda dapat menambahkan, menghapus, atau mengubah kelas CSS pada elemen menggunakan metode classList. Ini memungkinkan Anda mengubah tampilan elemen dengan menerapkan atau menghapus gaya CSS tertentu.

Menavigasi dalam DOM: Anda dapat menavigasi antara elemen-elemen dalam DOM menggunakan metode seperti parentNode, nextSibling, atau querySelector. Ini memungkinkan Anda mengakses dan memanipulasi elemen-elemen terkait dalam hierarki DOM.

Manipulasi DOM memungkinkan Anda untuk membuat halaman web interaktif, di mana elemen-elemen dapat diubah, ditambahkan, atau dihapus berdasarkan tindakan pengguna atau kondisi tertentu. Dengan JavaScript dan manipulasi DOM, Anda dapat membuat perubahan pada halaman web secara real-time, memberikan respons terhadap interaksi pengguna, atau membuat animasi dan efek visual yang menarik.