getElementsByClassName

Pelajaran 5 dari 13 dalam kursus Metode DOM JavaScript di Coddy.

Fungsi getElementsByClassName() mengembalikan array berisi semua elemen dengan atribut class yang cocok, yang berguna untuk memilih beberapa elemen yang memiliki gaya atau perilaku yang sama. Contohnya:

const elements = document.getElementsByClassName("className");

Kode di atas mengambil elemen dengan class className dan menyimpannya ke variabel bernama elements.

Kita harus melakukan iterasi pada variabel ini untuk mengubah property semua elemen serupa, contohnya:

for (const element of elements) {
	className.style.color = "blue";
	className.style.fontWeight = "bolder";
}

Tantangan

Mudah

Kamu diberi kode HTML yang berisi paragraf dengan nama class highlight.

Hanya menggunakan JavaScript, ubah warna dan ketebalan teks:

Ambil elemen menggunakan fungsi getElementsByClassName().
Lakukan perulangan pada variabel elemen yang diambil ini menggunakan for loop.
Ubah color menjadi “orange” dan fontWeight menjadi “bold” menggunakan property style untuk setiap elemen di dalam array.

Kamu perlu memuat ulang halaman web untuk melihat perubahannya:

Coba sendiri

<!DOCTYPE html>
<html>
    <body>
        <p class="highlight">Text 1</p>
        <p class="highlight">Text 2</p>
        <script src="script.js"></script>
    </body>
</html>

Semua pelajaran di Metode DOM JavaScript

1Pengantar

Pengantar Document Object Model

2Metode DOM I

getElementById Ubah Gaya ElemengetElementsByClassNameTelusuri dan Manipulasi getElementsByTagName querySelector

3Method DOM II

querySelectorAll addEventListener innerHTML createElement and appendChild classList toggle

Latihan sendiri: Playground Web