Menambahkan Atribut ke Semua Elemen Anak dengan JavaScript
Artikel ini akan membahas bagaimana cara menambahkan atribut ke semua elemen anak di dalam suatu elemen induk dengan JavaScript.
Penggunaan querySelectorAll dan forEach
Metode ini melibatkan pemilihan semua elemen anak menggunakan querySelectorAll dan kemudian menambahkan atribut menggunakan forEach.
const parentElement = document.getElementById('parent');
const childElements = parentElement.querySelectorAll('*'); // Seleksi semua elemen anak
childElements.forEach(element => {
element.setAttribute('data-added', 'true'); // Menambahkan atribut 'data-added'
});
Kode di atas akan menambahkan atribut data-added dengan nilai true ke semua elemen anak dari elemen dengan ID parent.
Menggunakan children dan forEach
Metode ini menggunakan properti children untuk mengakses semua elemen anak langsung dari elemen induk dan kemudian menggunakan forEach untuk menambahkan atribut.
const parentElement = document.getElementById('parent');
for (let i = 0; i < parentElement.children.length; i++) {
parentElement.children[i].setAttribute('data-added', 'true');
}
Kode ini akan menambahkan atribut data-added dengan nilai true ke semua elemen anak langsung dari elemen dengan ID parent.
Penjelasan
querySelectorAll: Memilih semua elemen yang cocok dengan selector CSS yang diberikan. Dalam contoh ini,'*'memilih semua elemen anak.forEach: Mengiterasi melalui setiap elemen dalam NodeList yang dikembalikan olehquerySelectorAll.setAttribute: Menambahkan atau memperbarui atribut pada elemen yang diberikan.children: Properti yang mengembalikan daftar semua elemen anak langsung dari elemen induk.
Contoh Penggunaan
Paragraf pertama
Span pertama
Div pertama
Setelah menjalankan kode JavaScript, semua elemen anak di dalam elemen div dengan ID parent akan memiliki atribut data-added dengan nilai true.
Kesimpulan
Anda dapat memilih salah satu metode di atas untuk menambahkan atribut ke semua elemen anak di dalam elemen induk menggunakan JavaScript. Pilihlah metode yang paling sesuai dengan kebutuhan Anda.