W3schools Javascript Get Element By Class

W3schools Javascript Get Element By Class

3 min read Jun 18, 2024
W3schools Javascript Get Element By Class

Mendapatkan Elemen HTML dengan Class Menggunakan JavaScript

JavaScript menyediakan beberapa metode untuk mengakses elemen HTML berdasarkan kelasnya. Metode yang paling umum digunakan adalah document.getElementsByClassName(). Metode ini mengembalikan NodeList yang berisi semua elemen HTML dengan kelas yang ditentukan.

Cara Menggunakan document.getElementsByClassName()

  1. Pilih kelas yang ingin Anda akses: Tentukan kelas yang ingin Anda gunakan sebagai parameter untuk getElementsByClassName().
  2. Gunakan document.getElementsByClassName(): Panggil metode ini dengan kelas yang ingin Anda akses sebagai argumen.
  3. Akses NodeList: Metode ini mengembalikan NodeList yang berisi semua elemen dengan kelas tersebut. Anda dapat mengakses elemen individual dalam NodeList dengan menggunakan indeks (mulai dari 0).
  4. Lakukan operasi: Setelah Anda mendapatkan elemen, Anda dapat melakukan berbagai operasi seperti mengubah konten, menambahkan atribut, atau memanipulasi gaya.

Contoh Penggunaan

// Mendapatkan semua elemen dengan kelas "my-class"
const elements = document.getElementsByClassName("my-class");

// Mencetak jumlah elemen yang ditemukan
console.log("Jumlah elemen dengan kelas 'my-class':", elements.length);

// Mengubah konten elemen pertama
elements[0].innerHTML = "Konten baru";

// Menambahkan atribut "title" ke elemen kedua
elements[1].setAttribute("title", "Ini adalah judul");

Mengapa Menggunakan document.getElementsByClassName()?

  • Fleksibel: Anda dapat mengakses beberapa elemen dengan kelas yang sama.
  • Mudah digunakan: Metode ini mudah dipelajari dan digunakan.
  • Efisien: Metode ini cukup efisien dalam mengakses elemen HTML.

Kesimpulan

document.getElementsByClassName() adalah metode yang powerful dan fleksibel untuk mengakses elemen HTML berdasarkan kelas. Ini memungkinkan Anda untuk memanipulasi dan mengubah perilaku elemen HTML dengan mudah.

Catatan:

  • NodeList bukan array. Anda tidak dapat menggunakan metode array seperti map, filter, atau reduce secara langsung pada NodeList. Anda harus mengubah NodeList menjadi array terlebih dahulu.
  • Jika Anda hanya ingin mengakses satu elemen dengan kelas tertentu, Anda dapat menggunakan document.querySelector() dengan selector CSS yang sesuai.

Dengan memahami bagaimana menggunakan document.getElementsByClassName(), Anda dapat mengendalikan dan memanipulasi halaman web Anda dengan lebih mudah menggunakan JavaScript.

Related Post