Menyeleksi dengan DOM

Setelah di Bab 3 kita belajar bagaimana cara JavaScript menemukan satu elemen melalui document.getElementById(), sekarang kita naik satu level:

Bagaimana kalau ada banyak elemen yang ingin kita ambil sekaligus?

Dalam halaman web nyata, sering kali kita harus mengubah sekelompok elemen — misalnya:

• semua <p>

• semua tombol dengan class tertentu

• semua item list

• semua kartu produk

• semua kotak notifikasi

Untuk itu JavaScript menyediakan dua alat yang sangat penting:

• document.getElementsByTagName()

• document.getElementsByClassName()

Di bab ini, kita akan mempelajari:

• Bagaimana cara mengambil banyak elemen sekaligus

• Perbedaan Tag Name vs Class Name

• Apa itu HTMLCollection

• Apa bedanya HTMLCollection dengan Array

• Bagaimana cara mengakses elemen ke-0, ke-1, dst

• Contoh kasus dunia nyata

Tujuan materi ini: Agar kita bisa membuat halaman web dengan perubahan massal — bukan hanya satu elemen, tetapi banyak sekaligus dengan efisien.

---

A. Konsep Dasar: Mengambil Banyak Elemen

Ketika kita mengambil banyak elemen, JavaScript mengembalikan sesuatu yang disebut:

HTMLCollection

Ini mirip seperti:

• daftar barang

• list buku di perpustakaan

• kumpulan meja di kelas

• atau barisan mobil di parkiran

HTMLCollection mirip array, tetapi bukan array asli. Namun tetap bisa diakses seperti:

koleksi[0]
koleksi[1]
koleksi[2]

---

B. document.getElementsByTagName()

1. Apa itu?

Metode untuk mengambil semua elemen berdasarkan nama tag HTML.

Format:

document.getElementsByTagName("p");

Ini akan mengembalikan semua elemen <p> di halaman.

---

2. Analogi Dunia Nyata

Bayangkan kita masuk ke perpustakaan dan berkata:

“Tolong kumpulkan semua buku Novel!”

Maka petugas perpustakaan akan memberikan daftar semua novel yang ada. Tag Name bekerja seperti itu:

• “p” = paragraf

• “div” = kotak

• “button” = tombol

• “h1”, “h2”, dll

---

3. Contoh HTML

<p>A</p>
<p>B</p>
<p>C</p>

Mengambilnya:

let items = document.getElementsByTagName("p");

Sekarang items berisi 3 elemen <p>.

Mengubah elemen pertama:

items[0].innerText = "Ubah";

Mengubah semuanya:

for (let i = 0; i < items.length; i++) {
    items[i].style.color = "red";
}

---

C. document.getElementsByClassName()

1. Apa itu?

Metode untuk mengambil semua elemen berdasarkan class tertentu.

Format:

document.getElementsByClassName("box");

---

2. Analogi Dunia Nyata

Bayangkan sebuah sekolah dengan banyak kelas:

• Class “XI-RPL”

• Class “XII-RPL”

• Class “XII-TKJ”

Kalau kita bilang:

“Tolong kumpulkan semua siswa dari kelas XII-RPL!”

Maka kita akan mendapatkan seluruh siswa kelas XII-RPL — bukan satu siswa saja.

Itulah yang dilakukan Class Name.

---

3. Contoh HTML

<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>

Mengambilnya:

let box = document.getElementsByClassName("box");

Mengubah elemen pertama:

box[0].innerText = "Diubah";

Mengubah semua elemen:

for (let i = 0; i < box.length; i++) {
    box[i].style.backgroundColor = "yellow";
}

---

D. Perbandingan Tag Name vs Class Name

Kriteria	getElementsByTagName	getElementsByClassName
Berdasarkan	Nama tag	Nama class
Hasil	HTMLCollection	HTMLCollection
Cocok untuk	Semua elemen <p>, <div>	Grup elemen berdasarkan kategori
Jumlah elemen	Banyak	Banyak

---

E. Contoh Kasus Dunia Nyata

1) Mengubah seluruh paragraf di artikel

let p = document.getElementsByTagName("p");

for (let i = 0; i < p.length; i++) {
    p[i].style.lineHeight = "30px";
}

---

2) Mengubah warna semua elemen notifikasi

let notif = document.getElementsByClassName("notif");

for (let i = 0; i < notif.length; i++) {
    notif[i].style.backgroundColor = "lightblue";
}

---

3) Menambahkan label “NEW” pada semua produk baru

let produkBaru = document.getElementsByClassName("new");

for (let i = 0; i < produkBaru.length; i++) {
    produkBaru[i].innerHTML += "<span class='label'>NEW</span>";
}

---

4) Mewarnai semua tombol submit

let btn = document.getElementsByTagName("button");

for (let i = 0; i < btn.length; i++) {
    btn[i].style.borderRadius = "8px";
}

---

F. Kesalahan Umum (Sesuai Pola Soal)

Kesalahan:

document.getElementByClass("box")[0]; // ❌ tidak ada metode ini
document.getElementsById("box"); // ❌ ID hanya satu, bukan banyak
getElementsByClassName("box").innerText = "OK"; // ❌ perlu indeks

Yang benar:

document.getElementsByClassName("box")[0].innerText = "OK";

---

Kesimpulan

Di Bab 4 ini kita belajar kemampuan penting dalam manipulasi DOM:

• Bagaimana cara mengambil banyak elemen sekaligus

• Cara menggunakan getElementsByTagName() dan getElementsByClassName()

• Cara mengakses elemen [0], [1], dst

• Cara melakukan perubahan massal lewat loop

• Contoh nyata yang sering dipakai di web modern

Sekarang mari kita refleksikan:

Dengan kemampuan untuk memanipulasi banyak elemen sekaligus, hal apa yang bisa kita buat di halaman web?

Beberapa gagasan:

• Mengubah tema warna seluruh halaman

• Menyorot semua paragraf penting

• Menandai semua item “baru” atau “diskon”

• Membuat animasi sederhana pada banyak elemen

• Men-custom tampilan list produk atau data

Cobalah tulis satu ide: “Apa hal yang ingin kita ubah pada banyak elemen dalam satu waktu?”

Karena di Bab 5 nanti, kita akan belajar teknik berikutnya yang membuat halaman web menjadi interaktif:

🎯 Event Handling: onclick

Kita akan belajar bagaimana sebuah elemen bisa berubah hanya karena kita klik tombol atau melakukan aksi tertentu.