Sign in Subscribe
Javascript

Menyeleksi Elemen DOM dengan getElementById()

Menyeleksi Elemen DOM dengan getElementById()
Photo by Richy Great / Unsplash

Saat mengembangkan halaman web dengan JavaScript, kita sering perlu berinteraksi dengan elemen HTML. Salah satu cara termudah untuk menyeleksi elemen tertentu dalam DOM (Document Object Model) adalah dengan metode getElementById().

Metode ini memungkinkan kita mengambil elemen HTML berdasarkan id yang diberikan, sehingga kita bisa mengubah kontennya, menambahkan event listener, atau mengubah gaya tampilannya.

Cara Kerja getElementById()

getElementById() adalah metode bawaan dalam JavaScript yang digunakan untuk mendapatkan elemen berdasarkan atribut id dalam HTML. Metode ini mengembalikan sebuah objek elemen DOM, bukan sebuah array atau node list.

Sintaks Dasar

document.getElementById("id-elemen");
  • document → Merepresentasikan seluruh halaman web.
  • getElementById("id-elemen") → Mengambil elemen dengan id yang sesuai.

Penting: id dalam HTML harus bersifat unik dalam satu halaman agar metode ini bekerja dengan benar.

Contoh Penggunaan getElementById()

1. Mengambil dan Mengubah Konten Elemen

Misalnya, kita memiliki elemen berikut dalam HTML:

<h1 id="judul">Selamat Datang</h1>

Lalu kita ingin mengubah teksnya menggunakan JavaScript:

const elemenJudul = document.getElementById("judul");
elemenJudul.innerHTML = "Halo, Dunia!";

Hasilnya:

<h1 id="judul">Halo, Dunia!</h1>

Metode innerHTML memungkinkan kita untuk mengubah isi teks dalam elemen tersebut.

2. Mengubah Gaya (CSS) Elemen

Kita juga bisa mengubah gaya tampilan elemen dengan JavaScript.

const elemenJudul = document.getElementById("judul");
elemenJudul.style.color = "blue";
elemenJudul.style.fontSize = "24px";

Kode ini akan mengubah warna teks menjadi biru dan ukuran font menjadi 24px.

3. Menambahkan Event pada Elemen

Kita bisa menggunakan getElementById() untuk menambahkan event, seperti klik tombol.

HTML:

<button id="tombol">Klik Saya</button>
<p id="teks">Belum diklik</p>

JavaScript:

document.getElementById("tombol").addEventListener("click", function() {
    document.getElementById("teks").innerHTML = "Tombol sudah diklik!";
});

Setelah tombol diklik, teks dalam elemen <p> akan berubah menjadi "Tombol sudah diklik!".

4. Menyembunyikan dan Menampilkan Elemen

Jika kita ingin menyembunyikan atau menampilkan elemen dengan tombol, kita bisa menggunakan style.display.

HTML:

<button id="toggle">Tampilkan/Sembunyikan</button>
<p id="pesan">Ini adalah pesan rahasia!</p>

JavaScript:

document.getElementById("toggle").addEventListener("click", function() {
    const elemen = document.getElementById("pesan");
    if (elemen.style.display === "none") {
        elemen.style.display = "block";
    } else {
        elemen.style.display = "none";
    }
});

Ketika tombol diklik, elemen <p> akan disembunyikan atau ditampilkan kembali secara bergantian.

Keuntungan Menggunakan getElementById()

✅ Cepat – Karena hanya mencari satu elemen berdasarkan id, performanya lebih baik dibanding querySelector() atau getElementsByClassName().
✅ Mudah digunakan – Cukup tentukan id elemen dan langsung bisa digunakan.
✅ Kompatibel di semua browser – Metode ini didukung oleh semua browser modern maupun versi lama.

Kesimpulan

  • getElementById() digunakan untuk mengambil elemen berdasarkan atribut id dalam HTML.
  • Bisa digunakan untuk mengubah konten, mengatur gaya elemen, menambahkan event, atau menyembunyikan/menampilkan elemen.
  • Harus digunakan dengan id yang unik dalam satu halaman.
  • Metode ini sangat cepat dan efisien untuk seleksi elemen tunggal dalam DOM.

Dengan memahami cara kerja getElementById(), kamu bisa lebih mudah memanipulasi halaman web menggunakan JavaScript. Yuk, langsung coba di proyekmu!

Read next