Add Class To First Child Element Javascript

MUAZHAN

4 min read

·

Jun 22, 2024

43

Share

Menambahkan Class ke Elemen Anak Pertama dengan JavaScript

Dalam pengembangan web, seringkali kita perlu memanipulasi tampilan dan perilaku elemen HTML dengan JavaScript. Salah satu manipulasi yang umum adalah menambahkan class ke elemen anak pertama dari sebuah elemen induk. Artikel ini akan membahas cara melakukannya dengan JavaScript.

Metode 1: Menggunakan firstElementChild

Metode ini memanfaatkan properti firstElementChild untuk mengakses elemen anak pertama dari sebuah elemen induk. Setelah mendapatkan akses ke elemen tersebut, kita bisa menggunakan metode classList.add() untuk menambahkan class baru.

Berikut contoh kodenya:

const parentElement = document.querySelector('.parent'); // Mengambil elemen dengan class 'parent'
const firstChild = parentElement.firstElementChild; // Mengakses elemen anak pertama
firstChild.classList.add('first-child-class'); // Menambahkan class 'first-child-class' ke elemen anak pertama

Metode 2: Menggunakan children[0]

Metode ini mengakses elemen anak pertama melalui indeks 0 dari properti children dari elemen induk. Setelah mendapatkan akses ke elemen tersebut, kita bisa menambahkan class baru dengan classList.add().

Berikut contoh kodenya:

const parentElement = document.querySelector('.parent'); // Mengambil elemen dengan class 'parent'
const firstChild = parentElement.children[0]; // Mengakses elemen anak pertama melalui indeks 0
firstChild.classList.add('first-child-class'); // Menambahkan class 'first-child-class' ke elemen anak pertama

Perbedaan Metode 1 dan Metode 2

Kedua metode ini menghasilkan hasil yang sama, namun ada sedikit perbedaan:

• firstElementChild hanya akan mengembalikan elemen anak pertama langsung dari elemen induk. Elemen anak yang tidak langsung (misalnya cucu) tidak akan dihitung.
• children[0] akan mengembalikan elemen anak pertama terlepas dari levelnya. Elemen anak langsung dan tidak langsung akan dihitung.

Contoh Penggunaan

Berikut contoh penggunaan dalam HTML dan JavaScript:

    
    
    
    


    

        
Ini adalah elemen anak pertama.
        
Ini adalah elemen anak kedua.
    

    

Pada contoh ini, elemen <p> pertama dalam elemen <div> akan diberi class first-child-class. Akibatnya, teks pada elemen <p> pertama akan berwarna biru dan tebal.

Kesimpulan

Menambahkan class ke elemen anak pertama dengan JavaScript merupakan proses yang mudah dengan menggunakan metode firstElementChild atau children[0]. Metode ini memungkinkan Anda memanipulasi tampilan dan perilaku elemen dengan fleksibilitas yang tinggi. Gunakan metode yang paling sesuai dengan kebutuhan dan struktur HTML Anda.