Add Class To Child Element Javascript

MUAZHAN

3 min read

·

Jun 22, 2024

37

Share

Menambahkan Class ke Elemen Anak dengan JavaScript

Menambahkan class ke elemen anak dalam JavaScript dapat dilakukan dengan beberapa cara, tergantung pada kebutuhan dan struktur HTML Anda. Berikut adalah beberapa metode yang umum digunakan:

1. Menggunakan querySelectorAll dan forEach

Metode ini memungkinkan Anda untuk memilih semua elemen anak dengan selector tertentu dan kemudian menambahkan class ke masing-masing elemen.

Contoh:

const parentElement = document.querySelector('.parent');
const childElements = parentElement.querySelectorAll('.child');

childElements.forEach(childElement => {
  childElement.classList.add('new-class');
});

Kode di atas memilih semua elemen dengan class child yang berada di dalam elemen dengan class parent. Kemudian, untuk setiap elemen anak, class new-class ditambahkan.

2. Menggunakan children dan forEach

Jika Anda ingin menambahkan class ke semua elemen anak langsung dari elemen induk, Anda dapat menggunakan properti children dan melakukan iterasi dengan forEach.

Contoh:

const parentElement = document.querySelector('.parent');

for (let i = 0; i < parentElement.children.length; i++) {
  parentElement.children[i].classList.add('new-class');
}

Kode ini akan menambahkan class new-class ke semua elemen anak langsung dari elemen dengan class parent.

3. Menggunakan getElementsByTagName dan forEach

Metode ini memungkinkan Anda untuk memilih semua elemen dengan tag tertentu di dalam elemen induk dan kemudian menambahkan class ke masing-masing elemen.

Contoh:

const parentElement = document.querySelector('.parent');
const childElements = parentElement.getElementsByTagName('li');

for (let i = 0; i < childElements.length; i++) {
  childElements[i].classList.add('new-class');
}

Kode di atas memilih semua elemen li di dalam elemen dengan class parent dan kemudian menambahkan class new-class ke masing-masing elemen.

4. Menggunakan classList.add secara langsung

Jika Anda sudah memiliki referensi ke elemen anak yang ingin Anda tambahkan class-nya, Anda dapat langsung menggunakan classList.add.

Contoh:

const childElement = document.querySelector('.child');
childElement.classList.add('new-class');

Kode ini akan menambahkan class new-class ke elemen dengan class child.

Tips Tambahan

• Pastikan selector Anda benar untuk memilih elemen anak yang Anda inginkan.
• Gunakan classList.contains untuk memeriksa apakah elemen anak sudah memiliki class tertentu sebelum menambahkan class baru.
• Jika Anda ingin menghapus class, gunakan classList.remove.

Dengan metode-metode di atas, Anda dapat dengan mudah menambahkan class ke elemen anak dalam JavaScript dan mengontrol tampilan serta perilaku elemen tersebut.