Home  >  Javascript

JavaScript DOM (Document Object Model)

JavaScript merupakan bahasa pemrograman yang sering digunakan untuk pengembangan web. Salah satu fitur penting dalam JavaScript adalah kemampuannya untuk berinteraksi dengan halaman web melalui DOM (Document Object Model). Dengan DOM, JavaScript dapat mengakses dan memanipulasi elemen HTML serta mengubah tampilan atau perilaku halaman secara dinamis.

Apa Itu DOM?

DOM (Document Object Model) adalah representasi struktural dari dokumen HTML atau XML dalam bentuk pohon (tree). Setiap elemen dalam dokumen direpresentasikan sebagai objek yang dapat dimanipulasi menggunakan JavaScript.

Sebagai contoh, struktur HTML berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh DOM</title>
</head>
<body>
    <h1 id="judul">Belajar JavaScript DOM</h1>
    <p class="deskripsi">Ini adalah contoh manipulasi DOM.</p>
    <button onclick="ubahTeks()">Klik Saya</button>

    <script>
        function ubahTeks() {
            document.getElementById("judul").innerText = "DOM telah dimodifikasi!";
        }
    </script>
</body>
</html>

Pada contoh di atas, JavaScript menggunakan document.getElementById() untuk mengakses elemen <h1> dan mengubah isinya saat tombol ditekan.

Cara Mengakses Elemen DOM

JavaScript menyediakan beberapa metode untuk mengakses elemen HTML melalui DOM, di antaranya:

1. Menggunakan getElementById()

Digunakan untuk memilih elemen berdasarkan atribut id.

let elemenJudul = document.getElementById("judul");
console.log(elemenJudul.innerText);

2. Menggunakan getElementsByClassName()

Digunakan untuk memilih elemen berdasarkan atribut class.

javascriptCopyEditlet elemenParagraf = document.getElementsByClassName("deskripsi");
console.log(elemenParagraf[0].innerText);

3. Menggunakan getElementsByTagName()

Digunakan untuk memilih elemen berdasarkan nama tag HTML, seperti <p>, <h1>, atau <div>.

let elemenParagraf = document.getElementsByTagName("p");
console.log(elemenParagraf[0].innerText);

4. Menggunakan querySelector() dan querySelectorAll()

  • querySelector() memilih satu elemen berdasarkan selektor CSS.
  • querySelectorAll() memilih semua elemen yang cocok dengan selektor CSS.
let elemenJudul = document.querySelector("#judul"); // menggunakan ID
let elemenParagraf = document.querySelector(".deskripsi"); // menggunakan class

console.log(elemenJudul.innerText);
console.log(elemenParagraf.innerText);

Cara Memanipulasi Elemen DOM

Setelah mengakses elemen DOM, JavaScript dapat mengubah isi, atribut, dan gaya elemen tersebut.

1. Mengubah Teks atau Konten

Gunakan innerText atau innerHTML untuk mengubah teks di dalam elemen.

javascriptCopyEditdocument.getElementById("judul").innerText = "Judul Baru";
document.getElementById("judul").innerHTML = "<em>Judul dengan Italic</em>";

2. Mengubah Atribut

Gunakan setAttribute() atau properti langsung untuk mengubah atribut elemen.

document.getElementById("judul").setAttribute("style", "color: red;");
document.getElementById("judul").style.fontSize = "24px";

3. Menambahkan dan Menghapus Elemen

Gunakan createElement(), appendChild(), dan removeChild() untuk menambahkan atau menghapus elemen.

javascriptCopyEditlet paragrafBaru = document.createElement("p");
paragrafBaru.innerText = "Paragraf tambahan.";

document.body.appendChild(paragrafBaru); // Menambahkan elemen ke body

Menangani Event dengan DOM

DOM juga memungkinkan interaksi dengan pengguna melalui event seperti klik, hover, atau input.

Contoh Event Listener

document.getElementById("judul").addEventListener("click", function() {
    alert("Judul telah diklik!");
});

Kesimpulan

JavaScript DOM merupakan fitur yang sangat penting dalam pengembangan web karena memungkinkan pengembang untuk mengakses, memanipulasi, dan berinteraksi dengan elemen HTML secara dinamis. Dengan memahami metode akses elemen, manipulasi konten, dan penggunaan event, pengembang dapat membuat halaman web yang lebih interaktif dan responsif.

Categories:Javascript

Tags:

Related Posts