Document Object Model (DOM) adalah representasi struktural dari dokumen HTML yang memungkinkan kita untuk mengakses dan memanipulasi elemen-elemen dalam halaman web menggunakan JavaScript. Dengan DOM, kita dapat membuat perubahan pada elemen, menambahkan atau menghapus elemen, serta mengubah konten dan atribut HTML. Dalam artikel ini, kita akan menjelaskan cara memanipulasi DOM menggunakan JavaScript, termasuk mengakses elemen, memanipulasi konten, mengubah atribut, dan menambahkan atau menghapus elemen HTML.
Bagian 1: Mengakses Elemen dalam DOM
Untuk mengakses elemen dalam DOM, kita dapat menggunakan metode getElementById(), getElementsByClassName(), getElementsByTagName(), atau querySelector().
Contoh Kode:
<!DOCTYPE html>
<html>
<head>
<title>Contoh DOM Manipulasi</title>
</head>
<body>
<h1 id="judul">Selamat Datang</h1>
<p class="paragraf">Ini adalah contoh paragraf.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
// Mengakses elemen menggunakan getElementById()
let judul = document.getElementById("judul");
console.log(judul.textContent);
// Mengakses elemen menggunakan getElementsByClassName()
let paragraf = document.getElementsByClassName("paragraf");
console.log(paragraf[0].textContent);
// Mengakses elemen menggunakan getElementsByTagName()
let item = document.getElementsByTagName("li");
console.log(item[0].textContent);
// Mengakses elemen menggunakan querySelector()
let firstItem = document.querySelector("li");
console.log(firstItem.textContent);
</script>
</body>
</html>Penjelasan:
Pada contoh di atas, kita memiliki elemen-elemen dalam halaman HTML. Dalam skrip JavaScript, kita menggunakan metode-metode DOM untuk mengakses elemen-elemen tersebut.
Dalam pernyataan document.getElementById("judul"), kita menggunakan metode getElementById() untuk mengakses elemen dengan id “judul”. Hasilnya disimpan dalam variabel judul. Dalam contoh ini, kita mencetak isi teks elemen menggunakan console.log(judul.textContent).
Selanjutnya, dalam pernyataan document.getElementsByClassName("paragraf"), kita menggunakan metode getElementsByClassName() untuk mengakses elemen dengan class “paragraf”. Metode ini mengembalikan koleksi elemen, jadi kita perlu mengakses elemen yang tepat menggunakan indeks. Dalam contoh ini, kita mencetak isi teks elemen pertama dalam koleksi menggunakan console.log(paragraf[0].textContent).
Dalam pernyataan document.getElementsByTagName("li"), kita menggunakan metode getElementsByTagName() untuk mengakses elemen-elemen dengan tag “li”. Seperti sebelumnya, metode ini mengembalikan koleksi elemen, jadi kita perlu mengakses elemen yang tepat menggunakan indeks. Dalam contoh ini, kita mencetak isi teks elemen pertama dalam koleksi menggunakan console.log(item[0].textContent).
Terakhir, dalam pernyataan document.querySelector("li"), kita menggunakan metode querySelector() untuk mengakses elemen pertama yang sesuai dengan selektor CSS “li”. Hasilnya disimpan dalam variabel firstItem. Dalam contoh ini, kita mencetak isi teks elemen menggunakan console.log(firstItem.textContent).
Bagian 2: Memanipulasi Konten Elemen
Dengan DOM, kita dapat memanipulasi konten elemen, seperti mengubah teks, menambahkan HTML, atau menghapus konten.
Contoh Kode:
<!DOCTYPE html>
<html>
<head>
<title>Contoh DOM Manipulasi</title>
</head>
<body>
<h1 id="judul">Selamat Datang</h1>
<script>
let judul = document.getElementById("judul");
// Mengubah teks elemen
judul.textContent = "Halo, Dunia!";
// Menambahkan HTML ke elemen
judul.innerHTML += " <em>Selamat Belajar!</em>";
// Menghapus konten elemen
judul.innerHTML = "";
</script>
</body>
</html>Penjelasan:
Pada contoh di atas, kita mengakses elemen dengan id “judul” menggunakan document.getElementById("judul") dan menyimpannya dalam variabel judul.
Dalam pernyataan judul.textContent = "Halo, Dunia!", kita menggunakan properti textContent
untuk mengubah teks elemen menjadi “Halo, Dunia!”.
Selanjutnya, dalam pernyataan judul.innerHTML += " <em>Selamat Belajar!</em>", kita menggunakan properti innerHTML untuk menambahkan HTML ke elemen. Dalam contoh ini, kita menambahkan teks “Selamat Belajar!” dalam elemen.
Terakhir, dalam pernyataan judul.innerHTML = "", kita menggunakan properti innerHTML untuk menghapus konten elemen dengan mengatur nilainya menjadi string kosong. Dalam contoh ini, konten elemen “judul” akan dihapus.
Bagian 3: Mengubah Atribut Elemen
Dalam DOM, kita dapat mengubah atribut elemen, seperti mengubah nilai atribut class, id, src, atau href.
Contoh Kode:
<!DOCTYPE html>
<html>
<head>
<title>Contoh DOM Manipulasi</title>
</head>
<body>
<a id="link" href="#">Klik disini</a>
<script>
let link = document.getElementById("link");
// Mengubah nilai atribut href
link.href = "https://www.sumberilmu.id";
// Mengubah nilai atribut class
link.className = "tombol";
// Mengubah nilai atribut target
link.setAttribute("target", "_blank");
</script>
</body>
</html>Penjelasan:
Pada contoh di atas, kita mengakses elemen dengan id “link” menggunakan document.getElementById("link") dan menyimpannya dalam variabel link.
Dalam pernyataan link.href = "https://www.sumberilmu.id", kita mengubah nilai atribut href elemen menjadi “https://www.sumberilmu.id”.
Selanjutnya, dalam pernyataan link.className = "tombol", kita mengubah nilai atribut class elemen menjadi “tombol”.
Terakhir, dalam pernyataan link.setAttribute("target", "_blank"), kita menggunakan metode setAttribute() untuk mengubah nilai atribut target menjadi “_blank”. Metode setAttribute() membutuhkan dua argumen: nama atribut yang ingin diubah dan nilai yang baru.
Bagian 4: Menambahkan dan Menghapus Elemen HTML
Dengan DOM, kita dapat menambahkan elemen baru ke dalam halaman HTML atau menghapus elemen yang sudah ada.
Contoh Kode:
<!DOCTYPE html>
<html>
<head>
<title>Contoh DOM Manipulasi</title>
</head>
<body>
<ul id="daftar">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<button onclick="tambahItem()">Tambah Item</button>
<button onclick="hapusItem()">Hapus Item</button>
<script>
function tambahItem() {
let daftar = document.getElementById("daftar");
let newItem = document.createElement("li");
newItem.textContent = "Item Baru";
daftar.appendChild(newItem);
}
function hapusItem() {
let daftar = document.getElementById("daftar");
daftar.removeChild(daftar.lastElementChild);
}
</script>
</body>
</html>
Penjelasan:
Pada contoh di atas, kita memiliki sebuah daftar dengan id “daftar” yang berisi dua elemen “li”. Kita juga memiliki dua tombol, yaitu “Tambah Item” dan “Hapus Item”.
Dalam fungsi tambahItem(), kita mengakses elemen daftar menggunakan document.getElementById("daftar") dan menyimpannya dalam variabel daftar. Selanjutnya, kita menggunakan metode createElement() untuk membuat elemen “li” baru dan mengatur teks kontennya menjadi “Item Baru”. Terakhir, kita menggunakan metode appendChild() untuk menambahkan elemen baru ke dalam daftar.
Dalam fungsi hapusItem(), kita juga mengakses elemen daftar menggunakan document.getElementById("daftar") dan menyimpannya dalam variabel daftar. Kemudian, kita menggunakan metode removeChild() untuk menghapus elemen terakhir (elemen “li” terakhir) dalam daftar menggunakan daftar.lastElementChild.
Kesimpulan:
Dengan menggunakan DOM, kita dapat mengakses, memanipulasi, dan mengubah elemen-elemen dalam halaman HTML menggunakan JavaScript. Dalam artikel ini, kita telah menjelaskan cara mengakses elemen, memanipulasi konten, mengubah atribut, dan menambahkan atau menghapus elemen HTML. Dengan pemahaman tentang DOM dan operasi-operasi yang dapat dilakukan, kita dapat membuat interaksi yang dinamis dan mengubah tampilan halaman web secara dinamis menggunakan JavaScript.
