Anak Males – Pernah dengar tentang DOM atau Document Object Model? Kalau kamu sering bikin situs web atau aplikasi, pasti nggak asing lagi. DOM ini adalah jembatan antara HTML dan JavaScript. Dengan DOM, kita bisa mengontrol dan memanipulasi elemen-elemen HTML, mulai dari mengubah teks, menambahkan elemen baru, hingga menghapus yang sudah ada. Seru banget kan?
Dalam artikel ini, kita bakal bahas gimana cara manipulasi HTML pakai DOM di JavaScript dengan bahasa yang santai dan mudah dimengerti, lengkap dengan contoh praktisnya. Yuk, kita mulai!
Apa Itu DOM?
DOM, atau Document Object Model, adalah representasi dari struktur halaman web. Setiap elemen HTML di halaman web kita (kayak <div>, <h1>, atau <p>) bisa diakses dan dimanipulasi menggunakan JavaScript. Bayangkan DOM ini kayak pohon besar, di mana setiap elemen HTML adalah cabangnya. Nah, dengan JavaScript, kita bisa “memanjat” pohon ini dan ngubah-nubah setiap elemen sesuka hati.
Baca Juga : Belajar Javascript #11 : Objek
Mengapa DOM Penting?
DOM memungkinkan kamu untuk mengontrol halaman web secara dinamis. Mau ngubah konten tanpa reload halaman? Bisa banget. Mau nambahin elemen baru atau hapus elemen yang nggak diperlukan? Tinggal gunakan JavaScript buat manipulasi DOM, gampang!
Mengakses Elemen HTML dengan DOM
Oke, langkah pertama adalah kita harus bisa “menemukan” elemen HTML yang mau kita manipulasi. Untungnya, JavaScript punya beberapa cara untuk melakukannya. Salah satunya adalah menggunakan metode document.getElementById() dan document.querySelector().
1. Menggunakan getElementById()
Metode ini digunakan kalau kita pengen ngambil elemen yang punya atribut id tertentu. Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Manipulasi DOM</title>
</head>
<body>
<h1 id="judul">Hello, World!</h1>
<script>
// Mengambil elemen dengan id "judul"
const heading = document.getElementById("judul");
console.log(heading.innerText); // Output: Hello, World!
</script>
</body>
</html>2. Menggunakan querySelector()
Kalau mau ngambil elemen berdasarkan class, tag, atau bahkan atribut spesifik lainnya, kita bisa pakai querySelector(). Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Manipulasi DOM</title>
</head>
<body>
<h1 class="judul">Hello, World!</h1>
<p>Ini paragraf pertama</p>
<script>
// Mengambil elemen pertama dengan tag <p>
const paragraf = document.querySelector("p");
console.log(paragraf.innerText); // Output: Ini paragraf pertama
</script>
</body>
</html>Baca Juga : Belajar Javascript #10 : Fungsi
Mengubah Konten dengan DOM
Setelah kita berhasil menemukan elemen yang mau dimanipulasi, langkah selanjutnya adalah mengubah kontennya. Salah satu cara paling sederhana adalah menggunakan properti innerText atau innerHTML.
1. Menggunakan innerText
Kalau cuma mau ubah teks dari elemen, kita bisa pakai innerText. Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Manipulasi DOM</title>
</head>
<body>
<h1 id="judul">Hello, World!</h1>
<button onclick="ubahTeks()">Ubah Teks</button>
<script>
function ubahTeks() {
const heading = document.getElementById("judul");
heading.innerText = "Teks Berubah!";
}
</script>
</body>
</html>2. Menggunakan innerHTML
Kalau mau ganti isi elemen sekaligus dengan tag HTML di dalamnya, bisa pakai innerHTML. Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Manipulasi DOM</title>
</head>
<body>
<div id="konten">
<h1>Judul</h1>
<p>Ini paragraf.</p>
</div>
<button onclick="ubahKonten()">Ubah Konten</button>
<script>
function ubahKonten() {
const konten = document.getElementById("konten");
konten.innerHTML = "<h2>Konten Baru</h2><p>Paragraf baru di sini.</p>";
}
</script>
</body>
</html>Baca Juga : Belajar Javascript #09 : Array
Menambahkan dan Menghapus Elemen dengan DOM
Kita nggak cuma bisa ngubah konten yang udah ada, tapi juga bisa nambahin elemen baru atau ngapus elemen yang udah ada.
1. Menambahkan Elemen Baru
Untuk menambahkan elemen baru, kita bisa pakai document.createElement() dan appendChild(). Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Manipulasi DOM</title>
</head>
<body>
<div id="list"></div>
<button onclick="tambahItem()">Tambah Item</button>
<script>
function tambahItem() {
const list = document.getElementById("list");
const itemBaru = document.createElement("p");
itemBaru.innerText = "Item baru";
list.appendChild(itemBaru);
}
</script>
</body>
</html>2. Menghapus Elemen
Untuk menghapus elemen, kita bisa pakai metode remove(). Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Manipulasi DOM</title>
</head>
<body>
<p id="paragraf">Ini paragraf.</p>
<button onclick="hapusParagraf()">Hapus Paragraf</button>
<script>
function hapusParagraf() {
const paragraf = document.getElementById("paragraf");
paragraf.remove();
}
</script>
</body>
</html>Baca Juga : Belajar Javascript #08 : Perulangan
Event Listener: Cara Keren untuk Memantau Interaksi Pengguna
Sering kali kita mau ngelakuin sesuatu saat pengguna berinteraksi dengan halaman, kayak ngeklik tombol atau hover di atas elemen. JavaScript punya fitur keren yang namanya event listener untuk memantau interaksi ini.
1. Menambahkan Event Listener
Kita bisa nambahin event listener dengan addEventListener(). Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Manipulasi DOM</title>
</head>
<body>
<button id="klik">Klik Aku!</button>
<script>
const tombol = document.getElementById("klik");
tombol.addEventListener("click", function () {
alert("Tombol diklik!");
});
</script>
</body>
</html>Baca Juga : Belajar Javascript #07 : Percabangan
Kesimpulan
Manipulasi HTML pakai DOM di JavaScript ternyata nggak sesusah yang dibayangkan, kan? Dengan menguasai konsep DOM ini, kamu bisa bikin halaman web jadi lebih interaktif dan dinamis. Mulai dari mengubah konten, menambahkan elemen, hingga menghapus elemen—semuanya bisa kamu lakukan dengan mudah pakai DOM. Sekarang, saatnya kamu praktek dan mulai eksplorasi lebih jauh!