DOM Manipulation: getElementById, querySelector

Pelajari cara manipulasi DOM di JavaScript dengan getElementById dan querySelector. Cocok untuk pemula yang ingin menguasai interaksi HTML & JavaScript.

Keywords: dom manipulation javascript, getElementById, querySelector javascript, javascript dom, document object model, dom selector js, belajar javascript pemula

Pernahkah kamu ingin membuat halaman web jadi interaktif? Misalnya:

• Klik tombol lalu teks berubah.
• Warna background berganti.
• Input form bisa diambil nilainya.

Semua itu bisa dilakukan dengan DOM Manipulation di JavaScript.
Di artikel ini, kita akan membahas dua cara paling sering dipakai untuk memilih elemen HTML:

• getElementById()
• querySelector()

Apa Itu DOM?

DOM (Document Object Model) adalah representasi struktur halaman web.

• HTML dianggap sebagai pohon (tree) dengan elemen-elemen di dalamnya.
• JavaScript bisa mengakses dan mengubah elemen HTML melalui DOM.

Contoh sederhana:

<h1 id="judul">Halo Dunia</h1>
<button id="tombol">Ubah Teks</button>

<h1 id="judul">Halo Dunia</h1>
<button id="tombol">Ubah Teks</button>

JavaScript bisa mengambil <h1> dan mengubah teksnya menjadi sesuatu yang baru.

1. getElementById()

getElementById() digunakan untuk memilih satu elemen HTML berdasarkan ID.

Sintaks

document.getElementById("idElemen");

document.getElementById("idElemen");

Contoh: Ubah Teks Judul

<h1 id="judul">Halo Dunia</h1>
<button onclick="ubahTeks()">Klik Aku</button>

<script>
  function ubahTeks() {
    let elemen = document.getElementById("judul");
    elemen.textContent = "Teks Berubah!";
  }
</script>

<h1 id="judul">Halo Dunia</h1>
<button onclick="ubahTeks()">Klik Aku</button>

<script>
  function ubahTeks() {
    let elemen = document.getElementById("judul");
    elemen.textContent = "Teks Berubah!";
  }
</script>

👉 Saat tombol diklik, teks <h1> akan berubah.

2. querySelector()

querySelector() digunakan untuk memilih elemen pertama yang cocok dengan CSS selector.

Sintaks

document.querySelector("selectorCSS");

document.querySelector("selectorCSS");

• Bisa pakai #id, .class, atau nama tag HTML.

Contoh: Pilih Elemen dengan Class

<p class="teks">Paragraf 1</p>
<p class="teks">Paragraf 2</p>

<script>
  let elemen = document.querySelector(".teks");
  elemen.style.color = "red";
</script>

<p class="teks">Paragraf 1</p>
<p class="teks">Paragraf 2</p>

<script>
  let elemen = document.querySelector(".teks");
  elemen.style.color = "red";
</script>

👉 Hanya Paragraf 1 yang berubah warna merah, karena querySelector hanya mengambil elemen pertama.

Perbedaan getElementById vs querySelector

Studi Kasus

Kasus 1 – Ubah Warna dengan getElementById

<h2 id="judul">Belajar DOM</h2>
<button onclick="ubahWarna()">Ubah Warna</button>

<script>
  function ubahWarna() {
    let elemen = document.getElementById("judul");
    elemen.style.color = "blue";
  }
</script>

<h2 id="judul">Belajar DOM</h2>
<button onclick="ubahWarna()">Ubah Warna</button>

<script>
  function ubahWarna() {
    let elemen = document.getElementById("judul");
    elemen.style.color = "blue";
  }
</script>

👉 Saat tombol diklik, warna teks berubah jadi biru.

Kasus 2 – Ubah Elemen Pertama dengan querySelector

<p class="item">Item 1</p>
<p class="item">Item 2</p>
<p class="item">Item 3</p>

<script>
  let itemPertama = document.querySelector(".item");
  itemPertama.style.fontWeight = "bold";
</script>

<p class="item">Item 1</p>
<p class="item">Item 2</p>
<p class="item">Item 3</p>

<script>
  let itemPertama = document.querySelector(".item");
  itemPertama.style.fontWeight = "bold";
</script>

👉 Hanya “Item 1” yang menjadi tebal.

Kasus 3 – Ambil Input Form

<input type="text" id="nama" placeholder="Masukkan Nama">
<button onclick="tampilkan()">Submit</button>
<p id="hasil"></p>

<script>
  function tampilkan() {
    let input = document.getElementById("nama").value;
    document.querySelector("#hasil").textContent = "Halo, " + input;
  }
</script>

<input type="text" id="nama" placeholder="Masukkan Nama">
<button onclick="tampilkan()">Submit</button>
<p id="hasil"></p>

<script>
  function tampilkan() {
    let input = document.getElementById("nama").value;
    document.querySelector("#hasil").textContent = "Halo, " + input;
  }
</script>

👉 Saat user mengetik nama lalu klik submit, teks akan berubah menampilkan nama user.

Best Practice

✔ Gunakan getElementById jika hanya butuh satu elemen dengan ID unik.
✔ Gunakan querySelector untuk fleksibilitas lebih (ID, class, tag).
✔ Selalu pastikan elemen sudah ada di DOM sebelum diakses (letakkan <script> di bawah body atau gunakan DOMContentLoaded).
✔ Lebih efisien jika ID sudah cukup → pakai getElementById.

FAQ

1. Apa bedanya querySelector dan querySelectorAll?

• querySelector → hanya elemen pertama.
• querySelectorAll → semua elemen, dalam bentuk NodeList.

2. Apakah getElementById bisa mengambil beberapa elemen sekaligus?
Tidak. ID harus unik dalam satu halaman.

3. Mana yang lebih cepat, getElementById atau querySelector?
getElementById sedikit lebih cepat, tapi perbedaan tidak signifikan untuk web modern.

Kesimpulan

• DOM memungkinkan JavaScript untuk mengakses dan memanipulasi elemen HTML.
• getElementById cocok untuk elemen unik dengan ID.
• querySelector lebih fleksibel karena bisa pakai selector CSS.
• Dengan dua metode ini, kamu bisa mulai membuat web interaktif.

👉 Lanjut ke [Hari 15: Event Listener di JavaScript – Klik, Input, Hover] untuk belajar membuat halaman web yang lebih dinamis dengan event!