Vanilla Javascript Find Element By Class

Vanilla Javascript Find Element By Class

3 min read Jun 20, 2024
Vanilla Javascript Find Element By Class

Vanilla JavaScript: Menemukan Elemen Berdasarkan Class

Dalam dunia pengembangan web, sering kali kita perlu memanipulasi elemen HTML berdasarkan class-nya. Vanilla JavaScript menyediakan beberapa metode untuk membantu kita mencapai tujuan ini.

1. Menggunakan document.getElementsByClassName()

Metode getElementsByClassName() mengembalikan koleksi semua elemen HTML yang memiliki class tertentu.

const elements = document.getElementsByClassName("my-class");

// Iterasi melalui setiap elemen
for (let i = 0; i < elements.length; i++) {
    console.log(elements[i]);
}

Keuntungan:

  • Sederhana dan mudah dipahami.
  • Mengakomodasi multiple elemen dengan class yang sama.

Kekurangan:

  • Mengembalikan NodeList, bukan array.
  • Tidak memungkinkan pencarian berdasarkan class tunggal pada elemen tunggal.

2. Menggunakan document.querySelector() dan document.querySelectorAll()

Metode querySelector() mencari dan mengembalikan satu elemen yang pertama kali cocok dengan selector CSS yang diberikan. Sementara itu, querySelectorAll() mengembalikan koleksi semua elemen yang cocok.

// Mencari satu elemen
const element = document.querySelector(".my-class");
console.log(element);

// Mencari semua elemen
const elements = document.querySelectorAll(".my-class");

// Iterasi melalui setiap elemen
elements.forEach(element => {
    console.log(element);
});

Keuntungan:

  • Fleksibilitas tinggi dalam menentukan selector CSS.
  • Mendukung penggunaan multiple class dalam selector.
  • Mengembalikan array-like NodeList.

Kekurangan:

  • querySelector() hanya mengembalikan elemen pertama yang cocok.

3. Menggunakan document.getElementById()

Metode ini mencari dan mengembalikan elemen yang memiliki ID tertentu. Meskipun tidak secara langsung menggunakan class, ini dapat digunakan dalam kombinasi dengan classList untuk memeriksa dan memanipulasi class suatu elemen.

const element = document.getElementById("my-element");

// Memeriksa apakah elemen memiliki class tertentu
if (element.classList.contains("my-class")) {
    console.log("Elemen memiliki class my-class");
}

// Menambahkan class ke elemen
element.classList.add("new-class");

// Menghapus class dari elemen
element.classList.remove("my-class");

Keuntungan:

  • Lebih efisien untuk mencari elemen dengan ID tunggal.
  • Memungkinkan manipulasi class secara langsung.

Kekurangan:

  • Hanya berlaku untuk elemen dengan ID unik.

Rekomendasi

  • Gunakan document.getElementsByClassName() jika Anda ingin mencari semua elemen dengan class tertentu.
  • Gunakan document.querySelector() jika Anda ingin mencari hanya satu elemen yang cocok dengan selector CSS.
  • Gunakan document.querySelectorAll() jika Anda ingin mencari semua elemen yang cocok dengan selector CSS.
  • Gunakan document.getElementById() dan classList jika Anda ingin memanipulasi class elemen yang sudah ditemukan berdasarkan ID-nya.

Dengan memahami metode-metode ini, Anda dapat dengan mudah memanipulasi elemen HTML berdasarkan class-nya dalam pengembangan web Anda menggunakan Vanilla JavaScript.