Belajar DOM JavaScript untuk Pemula

Setelah memahami dasar JavaScript dan cara menghubungkannya ke HTML, langkah berikutnya adalah belajar DOM JavaScript.

DOM merupakan salah satu konsep penting dalam pengembangan website karena memungkinkan JavaScript berinteraksi langsung dengan elemen HTML.

Dengan DOM, kita bisa mengubah teks, mengganti warna, membaca input pengguna, menampilkan atau menyembunyikan elemen, hingga membuat halaman website menjadi interaktif.

Dalam artikel ini kita akan belajar DOM JavaScript dari dasar dengan contoh sederhana yang cocok untuk pemula.

Apa Itu DOM JavaScript?

DOM adalah singkatan dari Document Object Model.

DOM merupakan representasi struktur halaman HTML dalam bentuk objek yang dapat dibaca dan dimanipulasi menggunakan JavaScript.

Misalnya kita memiliki HTML berikut:

<h1>Belajar JavaScript</h1>
<p>Saya sedang belajar DOM.</p>

Ketika halaman dibuka di browser, browser akan membaca HTML tersebut kemudian membentuk struktur DOM.

Secara sederhana, strukturnya dapat dibayangkan seperti ini:

document
└── html
    └── body
        ├── h1
        └── p

Elemen seperti h1 dan p kemudian dapat diakses menggunakan JavaScript.

Apa Fungsi DOM?

DOM menjadi penghubung antara HTML dan JavaScript.

HTML digunakan untuk membuat struktur halaman, sedangkan JavaScript dapat menggunakan DOM untuk mengubah struktur tersebut ketika halaman sudah dibuka di browser.

Dengan DOM, kita dapat melakukan berbagai hal seperti:

• Mengubah teks pada halaman.
• Mengubah warna atau tampilan elemen.
• Membaca isi form.
• Menampilkan atau menyembunyikan elemen.
• Menambahkan elemen baru.
• Menghapus elemen.
• Merespons klik pengguna.

Inilah yang membuat sebuah website dapat menjadi lebih interaktif.

Mengenal Object document

Untuk bekerja dengan DOM, kita akan sering menggunakan object bernama document.

document mewakili halaman HTML yang sedang dibuka oleh browser.

Contohnya:

console.log(document);

Jika kode tersebut dijalankan melalui Console browser, kita dapat melihat struktur dokumen HTML yang sedang dibuka.

Dari object document inilah JavaScript dapat mencari elemen HTML tertentu.

Cara Memilih Elemen HTML dengan JavaScript

Sebelum mengubah sebuah elemen, kita harus memilih elemen tersebut terlebih dahulu.

Ada beberapa cara yang umum digunakan.

1. getElementById()

getElementById() digunakan untuk memilih elemen berdasarkan atribut id.

Contoh HTML:

<h1 id="judul">Belajar DOM JavaScript</h1>

JavaScript:

const judul = document.getElementById("judul");

console.log(judul);

JavaScript akan mencari elemen yang memiliki id="judul".

2. querySelector()

querySelector() dapat memilih elemen menggunakan selector seperti yang biasa digunakan pada CSS.

Memilih berdasarkan ID:

const judul = document.querySelector("#judul");

Memilih berdasarkan class:

const tombol = document.querySelector(".tombol");

Memilih berdasarkan nama elemen:

const paragraf = document.querySelector("p");

querySelector() akan mengambil elemen pertama yang cocok dengan selector.

3. querySelectorAll()

Jika ingin mengambil beberapa elemen sekaligus, kita dapat menggunakan querySelectorAll().

Contoh HTML:

<p class="teks">Paragraf pertama</p>
<p class="teks">Paragraf kedua</p>
<p class="teks">Paragraf ketiga</p>

JavaScript:

const semuaTeks = document.querySelectorAll(".teks");

console.log(semuaTeks);

Semua elemen yang memiliki class teks akan dipilih.

Mengubah Teks dengan DOM

Salah satu penggunaan DOM paling sederhana adalah mengubah teks.

Misalnya kita memiliki:

<h1 id="judul">Judul Lama</h1>

Kemudian JavaScript:

const judul = document.getElementById("judul");

judul.textContent = "Judul Baru";

Setelah kode dijalankan, teks Judul Lama akan berubah menjadi Judul Baru.

Apa Itu textContent?

textContent digunakan untuk membaca atau mengubah teks di dalam sebuah elemen.

Contoh:

const pesan = document.getElementById("pesan");

pesan.textContent = "Selamat datang di Ahli Ngodink";

Penggunaan textContent sangat umum ketika kita ingin mengubah tulisan pada halaman menggunakan JavaScript.

Apa Itu innerHTML?

Selain textContent, ada juga properti bernama innerHTML.

innerHTML dapat digunakan untuk memasukkan struktur HTML ke dalam sebuah elemen.

Contoh:

const kotak = document.getElementById("kotak");

kotak.innerHTML = "<strong>Belajar JavaScript</strong>";

Browser akan membaca tag strong sebagai HTML.

Namun, jangan memasukkan data dari pengguna secara langsung menggunakan innerHTML karena dapat menimbulkan masalah keamanan. Jika hanya ingin menampilkan teks biasa, gunakan textContent.

Mengubah CSS Menggunakan JavaScript

DOM juga memungkinkan JavaScript mengubah style sebuah elemen.

Contoh HTML:

<p id="pesan">Halo Dunia!</p>

JavaScript:

const pesan = document.getElementById("pesan");

pesan.style.color = "blue";
pesan.style.fontSize = "24px";

Setelah dijalankan, warna teks akan berubah menjadi biru dan ukuran teks menjadi lebih besar.

Mengubah Class dengan classList

Untuk project website yang lebih rapi, kita biasanya menggunakan class CSS daripada memasukkan banyak style langsung melalui JavaScript.

Misalnya CSS:

.aktif {
    background-color: black;
    color: white;
}

HTML:

<div id="kotak">Contoh Kotak</div>

JavaScript:

const kotak = document.getElementById("kotak");

kotak.classList.add("aktif");

Class aktif sekarang akan ditambahkan pada elemen tersebut.

Beberapa method yang sering digunakan adalah:

kotak.classList.add("aktif");
kotak.classList.remove("aktif");
kotak.classList.toggle("aktif");
kotak.classList.contains("aktif");

classList.add()

Digunakan untuk menambahkan class.

classList.remove()

Digunakan untuk menghapus class.

classList.toggle()

Jika class belum ada, class akan ditambahkan. Jika sudah ada, class akan dihapus.

Method ini sering digunakan untuk membuat menu, dark mode, dropdown, dan komponen interaktif lainnya.

Mengubah Atribut HTML

DOM juga dapat digunakan untuk membaca atau mengubah atribut HTML.

Contohnya:

<a id="link" href="#">Buka Website</a>

JavaScript:

const link = document.getElementById("link");

link.setAttribute("href", "https://ahlingodink.xyz");

Sekarang nilai atribut href telah berubah.

Untuk membaca nilai atribut:

const alamat = link.getAttribute("href");

console.log(alamat);

Membuat Elemen Baru dengan JavaScript

Kita juga dapat membuat elemen HTML baru menggunakan DOM.

Gunakan:

document.createElement()

Contoh:

const paragrafBaru = document.createElement("p");

paragrafBaru.textContent = "Paragraf ini dibuat dengan JavaScript.";

Elemen sudah dibuat tetapi belum tampil di halaman.

Untuk memasukkannya ke halaman:

document.body.appendChild(paragrafBaru);

Sekarang paragraf akan tampil di dalam halaman.

Contoh DOM JavaScript Sederhana

Sekarang kita membuat contoh sederhana. Ketika sebuah tombol diklik, teks judul akan berubah.

HTML:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar DOM</title>
</head>
<body>

    <h1 id="judul">Belajar DOM JavaScript</h1>

    <button id="tombol">Ubah Judul</button>

    <script src="script.js"></script>

</body>
</html>

Kemudian buat file script.js:

const judul = document.getElementById("judul");
const tombol = document.getElementById("tombol");

tombol.addEventListener("click", function () {
    judul.textContent = "Judul Berhasil Diubah!";
});

Ketika tombol diklik, tulisan pada elemen h1 akan berubah.

Bagaimana Kode Tersebut Bekerja?

Pertama, kita mengambil elemen judul:

const judul = document.getElementById("judul");

Kemudian mengambil tombol:

const tombol = document.getElementById("tombol");

Setelah itu JavaScript menunggu pengguna melakukan klik:

tombol.addEventListener("click", function () {
    judul.textContent = "Judul Berhasil Diubah!";
});

Ketika klik terjadi, JavaScript mengubah isi judul menggunakan textContent.

Konsep seperti ini merupakan dasar dari banyak fitur website modern.

Kesalahan Umum Saat Belajar DOM

1. Salah Menulis ID

HTML:

<h1 id="judul">Halo</h1>

Tetapi JavaScript:

document.getElementById("title");

Kode tersebut tidak akan menemukan elemen karena ID yang benar adalah judul.

2. Lupa Tanda # pada querySelector()

Untuk memilih ID:

document.querySelector("#judul");

Untuk memilih class:

document.querySelector(".judul");

Tanda # digunakan untuk ID sedangkan tanda titik digunakan untuk class.

3. JavaScript Berjalan Sebelum HTML Tersedia

Jika JavaScript dijalankan sebelum elemen HTML tersedia, selector dapat menghasilkan nilai null.

Salah satu cara sederhana untuk mencegahnya adalah meletakkan script sebelum tag penutup body.

<script src="script.js"></script>
</body>

Atau gunakan atribut defer:

<script src="script.js" defer></script>

Latihan DOM JavaScript untuk Pemula

Agar lebih cepat memahami DOM, coba buat latihan kecil.

Buat halaman yang memiliki:

• Satu judul.
• Satu paragraf.
• Dua tombol.

Kemudian buat JavaScript dengan fungsi berikut:

1. Tombol pertama mengubah teks judul.
2. Tombol kedua mengubah class paragraf.
3. Ketika class berubah, warna paragraf ikut berubah.

Latihan sederhana seperti ini akan membantu memahami bagaimana JavaScript berinteraksi dengan HTML.

Method DOM yang Perlu Diketahui Pemula

Beberapa method dan properti DOM yang penting untuk dipelajari adalah:

• document.getElementById()
• document.querySelector()
• document.querySelectorAll()
• textContent
• innerHTML
• classList.add()
• classList.remove()
• classList.toggle()
• getAttribute()
• setAttribute()
• createElement()
• appendChild()

Tidak perlu menghafalkan semuanya sekaligus.

Untuk pemula, pahami terlebih dahulu pola dasar berikut:

Pilih elemen → lakukan sesuatu terhadap elemen tersebut.

Hubungan DOM dan JavaScript Event

DOM biasanya digunakan bersama JavaScript Event.

DOM digunakan untuk memilih elemen, sedangkan Event digunakan untuk mendeteksi tindakan pengguna.

Contohnya:

tombol.addEventListener("click", function () {
    console.log("Tombol diklik");
});

Pada contoh tersebut JavaScript menjalankan kode ketika pengguna melakukan klik.

Selain click, masih ada berbagai event lain seperti input, submit, change, dan keydown.

Event tersebut akan menjadi materi penting setelah memahami dasar DOM.

Kesimpulan

DOM atau Document Object Model memungkinkan JavaScript membaca dan memanipulasi elemen HTML.

Dengan DOM kita dapat:

• Memilih elemen HTML.
• Mengubah teks.
• Mengubah class dan style.
• Mengubah atribut.
• Membuat elemen baru.
• Membuat halaman menjadi interaktif.

Untuk pemula, mulai dari getElementById(), querySelector(), textContent, dan classList.

Setelah memahami DOM, langkah berikutnya adalah mempelajari JavaScript Event: Click, Input, dan Submit. Dengan memahami DOM dan Event, kamu sudah memiliki dasar penting untuk mulai membuat fitur website interaktif menggunakan JavaScript.