Menyeleksi Elemen DOM Menggunakan Selector

Dalam JavaScript, kita sering perlu mengambil elemen di dalam halaman web untuk dimanipulasi. Salah satu cara paling fleksibel adalah menggunakan Selector DOM, yang memungkinkan kita memilih elemen berdasarkan ID, class, atau tag. Dua metode utama yang sering digunakan adalah querySelector() dan querySelectorAll().

Selector ini bekerja dengan cara yang mirip dengan selector CSS, sehingga sangat fleksibel dan memungkinkan kita memilih elemen dengan cara yang lebih spesifik dibanding metode seperti getElementById(), getElementsByClassName(), atau getElementsByTagName().

Cara Kerja querySelector() dan querySelectorAll()

1. querySelector() – Menyeleksi Satu Elemen

Metode ini digunakan untuk menyeleksi satu elemen pertama yang cocok dengan selector CSS yang diberikan.

Sintaks Dasar:

document.querySelector("selector-CSS");

• Jika ada lebih dari satu elemen yang cocok, hanya elemen pertama yang akan dikembalikan.
• Jika elemen tidak ditemukan, hasilnya adalah null.

Contoh:

<h1 class="judul">Halo, Dunia!</h1>
<p class="paragraf">Ini adalah teks pertama.</p>
<p class="paragraf">Ini adalah teks kedua.</p>

const elemen = document.querySelector(".paragraf");
elemen.style.color = "blue"; // Hanya paragraf pertama yang berubah menjadi biru

2. querySelectorAll() – Menyeleksi Semua Elemen

Metode ini digunakan untuk menyeleksi semua elemen yang cocok dengan selector CSS yang diberikan.

Sintaks Dasar:

document.querySelectorAll("selector-CSS");

• Mengembalikan NodeList yang berisi semua elemen yang cocok.
• Untuk memanipulasi banyak elemen sekaligus, kita bisa menggunakan loop.

Contoh:

const paragraf = document.querySelectorAll(".paragraf");
paragraf.forEach(elemen => {
    elemen.style.color = "red";
});

Sekarang semua paragraf dengan class paragraf akan berubah menjadi merah.

Contoh Penggunaan Selector Lainnya

1. Menyeleksi Elemen Berdasarkan ID

const elemen = document.querySelector("#judul");
elemen.style.fontSize = "30px";

Selector #judul akan mengambil elemen dengan id="judul" dan mengubah ukuran fontnya.

2. Menyeleksi Elemen Berdasarkan Class

const elemen = document.querySelector(".paragraf");
elemen.style.fontWeight = "bold";

Class paragraf akan dipilih, tetapi hanya elemen pertama yang terkena efek.

3. Menyeleksi Elemen Berdasarkan Tag

const elemen = document.querySelector("h1");
elemen.style.textAlign = "center";

Elemen <h1> pertama di dalam dokumen akan menjadi tengah (center).

4. Menyeleksi Elemen Bersarang (Nested Selector)

Kita bisa memilih elemen yang ada di dalam elemen lain.

const elemen = document.querySelector(".container p");
elemen.style.color = "green";

Jika ada elemen dengan class container dan di dalamnya ada <p>, maka paragraf pertama dalam container akan berubah menjadi hijau.

5. Menyeleksi Elemen dengan Attribute Selector

Kita juga bisa menyeleksi elemen berdasarkan atribut yang dimilikinya.

const input = document.querySelector("input[type='text']");
input.style.border = "2px solid blue";

Kode ini akan menyeleksi elemen <input> yang memiliki atribut type="text" dan mengubah border-nya menjadi biru.

Perbedaan querySelector() vs querySelectorAll()

Kapan Menggunakan querySelector() atau querySelectorAll()?

✅ Gunakan querySelector() jika hanya perlu menyeleksi satu elemen pertama yang cocok.
✅ Gunakan querySelectorAll() jika ingin menyeleksi banyak elemen sekaligus.

Kesimpulan

• querySelector() digunakan untuk menyeleksi satu elemen pertama yang cocok dengan selector CSS.
• querySelectorAll() digunakan untuk menyeleksi semua elemen yang cocok.
• Kita bisa menggunakan selector berdasarkan ID, class, tag, atau atribut.
• Selector ini lebih fleksibel dibanding metode lain seperti getElementById() atau getElementsByClassName().

Dengan memahami cara menyeleksi elemen menggunakan selector, kita bisa lebih mudah memanipulasi elemen dalam halaman web dengan JavaScript. Yuk, langsung coba di proyekmu!