Mengambil Elemen: getElementById, querySelector, querySelectorAll.

Setelah memahami apa itu DOM, langkah pertama yang harus Anda kuasai adalah cara "menangkap" atau mengambil elemen HTML agar bisa dimanipulasi oleh JavaScript.

Ada tiga metode utama yang paling sering digunakan oleh developer modern. Berikut adalah panduan lengkapnya.

1. document.getElementById()

Ini adalah metode paling spesifik dan paling cepat secara performa. Digunakan untuk mengambil satu elemen tunggal berdasarkan atribut id-nya.

• Sintaks: document.getElementById("namaID")

• Karakteristik: Karena ID harus unik dalam satu halaman, metode ini selalu mengembalikan satu elemen saja (atau null jika tidak ditemukan).

// HTML: <h1 id="judul-utama">Halo Dunia</h1>
const judul = document.getElementById("judul-utama");
console.log(judul.innerText); // Output: Halo Dunia

2. document.querySelector()

Metode ini jauh lebih fleksibel. Anda bisa mengambil elemen menggunakan CSS Selector (seperti yang Anda gunakan di file .css).

• Sintaks: document.querySelector("selector")

• Karakteristik: Hanya mengambil elemen pertama yang cocok dengan selector tersebut.

// Mengambil berdasarkan Tag
const paragraf = document.querySelector("p"); // Mengambil berdasarkan Class (menggunakan tanda titik)
const tombol = document.querySelector(".btn-submit"); // Mengambil berdasarkan ID (menggunakan tanda pagar)
const header = document.querySelector("#header");

3. document.querySelectorAll()

Mirip dengan querySelector, tetapi ia mengambil semua elemen yang cocok dengan selector tersebut dan menyimpannya dalam sebuah daftar bernama NodeList.

• Sintaks: document.querySelectorAll("selector")

• Karakteristik: Mengembalikan kumpulan elemen (array-like object). Untuk memanipulasinya, Anda biasanya perlu melakukan perulangan (looping).

const semuaItem = document.querySelectorAll(".item-list"); // Mengubah warna semua item menggunakan forEach
semuaItem.forEach(item => { item.style.color = "blue";
});

Perbandingan Cepat

Tips Memilih Metode yang Tepat

1. Gunakan getElementById jika Anda tahu pasti elemen tersebut punya ID unik. Ini membuat kode Anda lebih niat dan efisien.

2. Gunakan querySelector jika Anda butuh fleksibilitas (misal: mengambil elemen span di dalam div yang punya class active).

3. Gunakan querySelectorAll jika Anda ingin mengubah banyak elemen sekaligus, seperti semua tombol di dalam sebuah menu.

Ingat: Saat menggunakan querySelector dan querySelectorAll, jangan lupa menyertakan tanda titik (.) untuk class dan tanda pagar (#) untuk ID, persis seperti penulisan di CSS!