Penjelasan querySelector JavaScript: Sintaks, Selektor Lanjutan, Praktik Terbaik, dan Contoh

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Pendahuluan: Apa Itu querySelector?

Gambaran Umum dan Peran querySelector

querySelector adalah metode yang mengembalikan elemen pertama yang cocok dengan selector yang ditentukan.

Mari kita lihat contoh di bawah.

const element = document.querySelector('.example');
console.log(element);

Kode ini mengambil elemen pertama dengan nama kelas example.

Bahkan jika ada banyak elemen dengan selector yang sama, hanya elemen pertama yang cocok yang dikembalikan.

<div class="example">1</div>
<div class="example">2</div>

Dalam kasus ini, hanya <div class="example">1</div> pertama yang akan dipilih.

Mengapa querySelector Penting dalam Manipulasi DOM

querySelector sangat berguna dalam situasi seperti berikut.

1. Pemilihan elemen yang fleksibel menggunakan selector CSS * Mendukung berbagai macam selector seperti kelas, ID, atribut, dan pseudo‑class.

2. Kode bersih bahkan untuk struktur yang kompleks * Menemukan elemen bersarang atau elemen dengan atribut tertentu secara efisien.

3. Gaya JavaScript yang konsisten dan modern * Lebih serbaguna dibandingkan getElementById atau getElementsByClassName, dan bekerja baik dengan pola JavaScript modern.

Berikut contoh pemilihan tombol tertentu di dalam sebuah form.

const submitButton = document.querySelector('form button[type="submit"]');
console.log(submitButton);

Kode ini hanya memilih tombol submit di dalam form.

Perbedaan Antara querySelector dan querySelectorAll

Sementara querySelector mengembalikan hanya elemen pertama yang cocok, querySelectorAll mengembalikan semua elemen yang cocok sebagai NodeList.

const elements = document.querySelectorAll('.example');
console.log(elements);

Kode ini mengambil semua elemen dengan nama kelas example.

Ringkasan

Pada bagian ini, kami menjelaskan konsep dasar dan peran metode querySelector JavaScript.

Poin penting:

1. Anda dapat memilih elemen secara fleksibel menggunakan selector CSS
2. querySelector mengembalikan hanya kecocokan pertama, sedangkan querySelectorAll mengembalikan semua kecocokan
3. Ini adalah metode penting untuk manipulasi DOM yang ringkas dan efisien

Pada bagian berikutnya, kami akan melihat lebih dekat sintaks dasar querySelector serta contoh penggunaan praktis.

2. Sintaks Dasar dan Penggunaan querySelector

Sintaks Dasar

Sintaks dasar querySelector adalah sebagai berikut:

document.querySelector(selector);

• Argument : String selector CSS.
• Return value : Elemen pertama yang cocok dengan selector. Jika tidak ada yang cocok, mengembalikan null.

Contoh: Memilih Elemen Dasar

1. Pilih berdasarkan ID Karena ID bersifat unik, Anda dapat memilih tepat satu elemen dengan andal.

   const element = document.querySelector('#header');
   console.log(element);
   

Kode ini memilih elemen dengan ID header.

2. Pilih berdasarkan kelas Ketika Anda menentukan nama kelas, hanya elemen pertama yang cocok yang dikembalikan.

   const element = document.querySelector('.content');
   console.log(element);
   

Kode ini memilih elemen pertama dengan nama kelas content.

3. Pilih berdasarkan nama tag Anda juga dapat memilih elemen dengan menentukan nama tag.

   const element = document.querySelector('p');
   console.log(element);
   

Kode ini memilih tag <p> pertama pada halaman.

Memilih Elemen dengan Selector Gabungan

Dengan menggabungkan selector CSS, Anda dapat menargetkan elemen secara lebih fleksibel.

1. Selector bersarang Pilih elemen dengan menentukan hubungan induk‑anak.

   const element = document.querySelector('div.container p');
   console.log(element);
   

Kode ini memilih tag <p> pertama di dalam <div> dengan nama kelas container.

2. Selector atribut Pilih elemen yang memiliki atribut tertentu.

   const element = document.querySelector('input[type="text"]');
   console.log(element);
   

This code selects the first <input> element whose type attribute is text.

3. Menggunakan pseudo-class Gunakan pseudo-class untuk memilih elemen dalam keadaan atau posisi tertentu.

   const element = document.querySelector('li:first-child');
   console.log(element);
   

Kode ini memilih elemen <li> pertama.

Apa yang Harus Dilakukan Saat querySelector Tidak Dapat Menemukan Elemen

querySelector mengembalikan null ketika tidak ada elemen yang cocok ditemukan. Karena alasan ini, penting untuk memeriksa apakah elemen tersebut ada setelah memilihnya.

const element = document.querySelector('.nonexistent');
if (element) {
  console.log('Element found');
} else {
  console.log('Element not found');
}

Kode ini bekerja dengan aman tanpa melemparkan kesalahan bahkan ketika elemen tersebut tidak ada.

Ringkasan

Dalam bagian ini, kami membahas sintaks dasar dan penggunaan querySelector.

Ringkasan cepat:

1. Anda dapat dengan mudah memilih elemen berdasarkan ID, kelas, atau nama tag
2. Anda dapat secara fleksibel memilih elemen dengan menggabungkan selektor kompleks dan pseudo-class
3. Penanganan kesalahan untuk elemen yang hilang juga penting

Dalam bagian selanjutnya, kami akan membahas contoh penggunaan lanjutan dengan selektor yang lebih kuat.

3. Contoh Lanjutan: Cara Menggunakan Selektor yang Lebih Kuat

Memilih Elemen Spesifik dengan Selektor Atribut

Selektor atribut memungkinkan Anda memilih elemen yang memiliki atribut atau nilai spesifik secara fleksibel.

1. Memilih elemen dengan nilai atribut spesifik

   const checkbox = document.querySelector('input[type="checkbox"]');
   console.log(checkbox);
   

Kode ini memilih elemen <input> pertama yang atribut type-nya adalah checkbox.

2. Gunakan pencocokan parsial untuk nilai atribut

   const link = document.querySelector('a[href^="https://"]');
   console.log(link);
   

Kode ini memilih tautan yang atribut href-nya dimulai dengan https://.

Selektor atribut yang umum digunakan:

Pemilihan dengan Pseudo-Class dan Pseudo-Element

Pseudo-class dan pseudo-element memudahkan pemilihan elemen dalam keadaan atau posisi spesifik.

1. Pseudo-class untuk keadaan

   const activeLink = document.querySelector('a.active');
   console.log(activeLink);
   

Kode ini memilih tautan yang memiliki kelas active.

2. Pseudo-class untuk posisi

   const firstItem = document.querySelector('ul > li:first-child');
   console.log(firstItem);
   

Kode ini memilih item pertama dalam daftar.

Pseudo-class yang umum digunakan:

Penyaringan Halus dengan Selektor Gabungan

Anda juga dapat menggabungkan beberapa selektor untuk mengekspresikan kondisi yang lebih kompleks.

1. Filter berdasarkan hubungan induk-anak

   const nestedElement = document.querySelector('div.container > p.text');
   console.log(nestedElement);
   

Kode ini memilih elemen p pertama dengan kelas text di dalam elemen div dengan kelas container.

2. Gabungkan beberapa kondisi

   const inputField = document.querySelector('input[type="text"].required');
   console.log(inputField);
   

Kode ini memilih elemen <input> pertama yang memiliki type="text" dan juga memiliki kelas required.

Ringkasan

Dalam bagian ini, kami menjelaskan penggunaan selektor lanjutan dengan querySelector.

Poin kunci:

1. Selektor atribut memungkinkan penyaringan elemen yang fleksibel
2. Pseudo-class dan pseudo-element memungkinkan Anda menargetkan keadaan dan posisi
3. Selektor gabungan memudahkan penentuan kondisi rinci dan pemilihan target kompleks

Dalam bagian selanjutnya, kami akan membahas peringatan penting dan praktik terbaik saat menggunakan querySelector.

4. Peringatan dan Praktik Terbaik Saat Menggunakan querySelector

Penanganan Kesalahan dan Pemeriksaan Null

Jika tidak ada elemen yang cocok dengan selektor yang ditentukan, querySelector mengembalikan null. Karena alasan itu, Anda harus selalu mengonfirmasi bahwa elemen tersebut ada sebelum mencoba memanipulasinya.

Contoh: Mengimplementasikan pemeriksaan null

const element = document.querySelector('.nonexistent');
if (element) {
  console.log('Element found');
  element.textContent = 'New text';
} else {
  console.log('Element not found');
}

Kode ini dengan aman menghindari error bahkan jika elemen tidak ada.

Meloloskan Karakter Khusus

Jika selector Anda berisi karakter khusus, querySelector dapat melempar error kecuali Anda meloloskannya dengan benar.

Contoh: Memilih elemen yang mengandung karakter khusus

HTML:

<div id="my.id">Special ID</div>

JavaScript:

const element = document.querySelector('#my\.id');
console.log(element);

Saat menangani karakter khusus (misalnya ., #, [, ], dll.), loloskan mereka menggunakan backslash (\).

Pertimbangan Kinerja

1. Hindari selector yang terlalu dalam Seiring selector menjadi lebih kompleks, browser mungkin memerlukan waktu lebih lama untuk menemukan elemen target. Gunakan selector yang lebih sederhana bila memungkinkan.

Tidak disarankan

const element = document.querySelector('div.container > ul > li.item > span.text');

Disarankan

const container = document.querySelector('.container');
const textElement = container.querySelector('.text');

2. Pilih beberapa elemen secara efisien Gunakan querySelectorAll untuk mengambil semua elemen target dan kemudian saring sesuai kebutuhan.

   const items = document.querySelectorAll('.item');
   items.forEach((item) => {
     console.log(item.textContent);
   });
   

Praktik Terbaik

1. Gunakan selector yang spesifik Gunakan selector yang spesifik untuk memastikan Anda hanya memilih elemen yang dimaksud.

   const button = document.querySelector('button.submit');
   

2. Gunakan konvensi penamaan yang konsisten Rancang nama kelas CSS dan ID dengan aturan yang konsisten untuk meningkatkan keterbacaan selector.
3. Fokus pada kode yang dapat digunakan kembali Jika Anda sering memilih elemen tertentu, lebih praktis membungkus logika tersebut ke dalam fungsi yang dapat digunakan kembali.

   function getElement(selector) {
     const element = document.querySelector(selector);
     if (!element) {
       console.warn(`Element not found: ${selector}`);
     }
     return element;
   }
   
   const header = getElement('#header');
   

Ringkasan

Pada bagian ini, kami membahas langkah-langkah pencegahan utama dan cara efisien menggunakan querySelector.

Poin penting:

1. Cegah error dengan selalu melakukan pengecekan null
2. Loloskan selector yang mengandung karakter khusus dengan benar
3. Rancang selector secara sederhana dengan mempertimbangkan kinerja
4. Gunakan fungsi dan konvensi penamaan untuk meningkatkan kegunaan kembali dan keterbacaan

Pada bagian berikutnya, kami akan memperkenalkan contoh praktis yang berguna dalam proyek nyata.

5. Pertanyaan yang Sering Diajukan (FAQ) dan Solusinya

Apa Perbedaan Antara querySelector dan getElementById?

Pertanyaan:
querySelector dan getElementById keduanya dapat digunakan untuk memilih elemen. Apa perbedaan di antara keduanya?

Jawaban:

Perbandingan penggunaan:

// With querySelector
const element1 = document.querySelector('#example');

// With getElementById
const element2 = document.getElementById('example');

Mana yang sebaiknya Anda gunakan?

• Untuk pemilihan berbasis ID yang sederhana, getElementById cepat dan direkomendasikan.
• Ketika Anda memerlukan penargetan berbasis selector yang fleksibel, gunakan querySelector.

Mengapa querySelector Kadang Tidak Berfungsi?

Pertanyaan:
Meskipun kode saya tampak benar, querySelector tidak berfungsi. Apa penyebabnya?

Jawaban:

1. Elemen belum ada di DOM

• DOM mungkin belum sepenuhnya dimuat saat skrip dijalankan. Solusi: Gunakan event DOMContentLoaded.

  document.addEventListener('DOMContentLoaded', () => {
    const element = document.querySelector('.example');
    console.log(element);
  });
  

2. Selector tidak tepat

• Nama kelas atau ID mungkin salah.

Hal yang perlu diperiksa:

• Verifikasi selector di alat pengembang browser Anda.

  const element = document.querySelector('.my-class');
  console.log(element); // Check the result in DevTools
  

3. Elemen ditambahkan secara dinamis

• Jika elemen ditambahkan secara dinamis melalui JavaScript, mungkin elemen tersebut belum ada pada saat Anda pertama kali mencoba memilihnya.

Solusi:
Lampirkan event listener pada elemen induk untuk menangani elemen yang ditambahkan secara dinamis.

document.body.addEventListener('click', (e) => {
  if (e.target.matches('.dynamic-element')) {
    console.log('Clicked');
  }
});

Cara Mengakses Elemen yang Ditambahkan Secara Dinamis

Pertanyaan:
Apakah elemen yang ditambahkan secara dinamis dapat dipilih dengan querySelector?

Jawaban:
Ya, mereka dapat. Namun, Anda perlu memperhatikan timing kapan elemen tersebut ditambahkan.

Solusi 1: Mengamati elemen dinamis

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.addedNodes.length) {
      const newElement = document.querySelector('.dynamic-element');
      if (newElement) {
        console.log('A new element was added:', newElement);
      }
    }
  });
});

observer.observe(document.body, { childList: true, subtree: true });

Solusi 2: Gunakan setTimeout atau setInterval

Jika elemen ditambahkan setelah jeda tertentu, Anda dapat memantau seperti ini:

setTimeout(() => {
  const dynamicElement = document.querySelector('.dynamic-element');
  console.log(dynamicElement);
}, 1000); // Check for the element after 1 second

Ringkasan

Pada bagian ini, kami membahas pertanyaan umum dan tips pemecahan masalah untuk penggunaan querySelector.

Ringkasan cepat:

1. Pahami kapan harus menggunakan querySelector vs. getElementById.
2. Jika tidak berhasil, periksa timing pemuatan DOM dan kesalahan selector.
3. Untuk elemen dinamis, gunakan event delegation atau MutationObserver.

Pada bagian berikutnya, kami akan merangkum poin-poin penting untuk penggunaan querySelector secara efektif.

6. Contoh Praktis: Cara Menggunakan querySelector dalam Proyek Nyata

Dapatkan Nilai Input Formulir dan Validasi Mereka

Skenario: Ketika pengguna memasukkan nilai ke dalam formulir, Anda mengambilnya dan melakukan validasi.

HTML

<form id="userForm">
  <input type="text" id="username" placeholder="Username">
  <input type="email" id="email" placeholder="Email address">
  <button type="submit">Submit</button>
</form>

JavaScript

const form = document.querySelector('#userForm');

form.addEventListener('submit', (event) => {
  event.preventDefault(); // Prevent form submission

  const username = document.querySelector('#username').value;
  const email = document.querySelector('#email').value;

  if (!username) {
    alert('Please enter a username');
    return;
  }

  if (!email.includes('@')) {
    alert('Please enter a valid email address');
    return;
  }

  alert('The form was submitted successfully');
});

Poin penting:

• Gunakan properti value untuk mendapatkan nilai input.
• Lakukan pemeriksaan validasi sederhana pada input pengguna.
• Gunakan event listener untuk menyesuaikan perilaku pengiriman formulir.

Cara Menambahkan Event Listener ke Elemen yang Ditambahkan Secara Dinamis

Skenario: Terapkan event listener pada elemen yang ditambahkan secara dinamis melalui JavaScript.

HTML

<div id="container">
  <button id="addButton">Add a button</button>
</div>

JavaScript

const container = document.querySelector('#container');
const addButton = document.querySelector('#addButton');

// Add a new button
addButton.addEventListener('click', () => {
  const newButton = document.createElement('button');
  newButton.classList.add('dynamic-button');
  newButton.textContent = 'Click me!';
  container.appendChild(newButton);
});

// Capture events on the parent element
container.addEventListener('click', (event) => {
  if (event.target.classList.contains('dynamic-button')) {
    alert('The new button was clicked!');
  }
});

Poin penting:

• Karena elemen yang ditambahkan secara dinamis tidak dapat direferensikan secara langsung, lampirkan pendengar acara (event listener) pada elemen induk.
• Gunakan event.target untuk mengidentifikasi elemen mana yang diklik.

Membuka dan Menutup Jendela Modal

Skenario: Implementasikan perilaku buka/tutup modal.

HTML

<div id="modal" class="modal hidden">
  <div class="modal-content">
    <span id="closeModal" class="close">&times;</span>
    <p>This is the modal content.</p>
  </div>
</div>
<button id="openModal">Open modal</button>

CSS

.hidden {
  display: none;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
}

JavaScript

const modal = document.querySelector('#modal');
const openModal = document.querySelector('#openModal');
const closeModal = document.querySelector('#closeModal');

// Open the modal
openModal.addEventListener('click', () => {
  modal.classList.remove('hidden');
});

// Close the modal
closeModal.addEventListener('click', () => {
  modal.classList.add('hidden');
});

// Close when clicking outside the modal
modal.addEventListener('click', (event) => {
  if (event.target === modal) {
    modal.classList.add('hidden');
  }
});

Poin penting:

• Gunakan classList untuk menambah/menghapus kelas dan mengubah visibilitas.
• Tingkatkan UX dengan memungkinkan modal menutup saat mengklik di luar area konten.

Ringkasan

Pada bagian ini, kami memperkenalkan contoh praktis tentang cara menggunakan querySelector dalam skenario pengembangan nyata.

Apa yang Anda pelajari:

1. Menerapkan penanganan formulir yang aman dengan mengambil dan memvalidasi input pengguna.
2. Menangani elemen yang ditambahkan secara dinamis secara fleksibel menggunakan delegasi acara.
3. Meningkatkan UI dengan mengimplementasikan perilaku buka/tutup modal.

Gunakan contoh-contoh ini sebagai referensi dan terapkan pada proyek pengembangan Anda sendiri. Pada bagian berikutnya, kami akan menutup artikel dengan merangkum poin-poin kunci penggunaan querySelector.

7. Ringkasan: Hal Penting yang Perlu Diketahui untuk Menggunakan querySelector Secara Efektif

Dalam artikel ini, kami membahas metode querySelector JavaScript secara detail, mulai dari dasar hingga kasus penggunaan lanjutan. Akhirnya, mari tinjau poin-poin terpenting dan rangkum cara menggunakannya secara efektif.

Peran Inti querySelector

• Seleksi elemen yang fleksibel : Anda dapat memilih elemen DOM secara efisien menggunakan selector CSS.
• Sintaks sederhana : Anda dapat memilih elemen secara intuitif menggunakan nama kelas, ID, nama tag, dan selector atribut.
• Berfungsi dengan elemen dinamis : Dengan melampirkan event listener pada elemen induk, Anda dapat menangani elemen yang ditambahkan kemudian.

Contoh sintaks dasar:

const element = document.querySelector('.example');

Penggunaan Lanjutan dan Pertimbangan Penting

1. Gunakan selector lanjutan

• Selector atribut dan pseudo‑class memungkinkan Anda menargetkan elemen dengan lebih tepat dan fleksibel.
• Contoh :

  const element = document.querySelector('input[type="checkbox"]:checked');
  

2. Tulis kode yang memperhatikan kinerja

• Kurangi beban pemrosesan dengan menggunakan selector sederhana bila memungkinkan.
• Ubah logika seleksi yang sering digunakan menjadi fungsi yang dapat dipakai ulang.

2. Penanganan error yang menyeluruh

• Lakukan pemeriksaan null dan tangani kasus di mana elemen tidak ada.
• Contoh :

  const element = document.querySelector('.nonexistent');
  if (element) {
    console.log('Element found');
  } else {
    console.log('Element not found');
  }
  

Meninjau Contoh Praktis

• Validasi formulir : Validasi nilai input untuk menerapkan pemrosesan formulir yang aman.
• Penanganan elemen dinamis : Menangani elemen yang dihasilkan melalui JavaScript secara fleksibel.
• Kontrol jendela modal : Tambahkan perilaku interaktif untuk meningkatkan UI/UX.

markdown.Melalui contoh-contoh ini, Anda mempelajari kepraktisan dan kemampuan perluasan querySelector.

Tips untuk Memanfaatkan querySelector Secara Maksimal

1. Manfaatkan alat pengembangan Anda

• Gunakan alat pengembang browser Anda untuk memvalidasi dan menguji selector.

1. Prioritaskan keterbacaan

• Rancang nama selector dan struktur kode agar mudah dipahami, meningkatkan kemampuan pemeliharaan.

1. Gunakan querySelectorAll bersama-sama bila diperlukan

• Saat bekerja dengan banyak elemen, gunakan querySelectorAll untuk menerapkan pemrosesan yang efisien.

Ringkasan

querySelector adalah metode yang kuat yang membuat manipulasi DOM menjadi sederhana dan efisien.

Poin utama dari artikel ini:

• Anda dapat memahami segala hal mulai dari penggunaan dasar hingga contoh lanjutan secara terstruktur.
• Dengan menggabungkan selector dan pseudo‑class, Anda dapat menargetkan elemen dengan fleksibilitas lebih.
• Dengan menangani error secara tepat dan mempertimbangkan kinerja, Anda dapat menulis kode yang lebih praktis dan dapat diandalkan.

Saat bekerja dengan manipulasi DOM di JavaScript, pastikan untuk menerapkan teknik yang diperkenalkan dalam artikel ini.

Sebagai langkah selanjutnya, perdalam pengetahuan Anda tentang manipulasi DOM, dan tingkatkan keterampilan Anda dengan mempelajari cara menggabungkan querySelector dengan metode lain!