Pada tutorial sebelumnya, kita sudah mempelajari JavaScript DOM Bagian 4 : Cara Menggunakan getElementsByName di JavaScript. Dalam tutorial ini, Anda akan mempelajari cara menggunakan metode getElementsByClassName() untuk memilih elemen berdasarkan nama class.
Pengantar Metode getElementsByClassName()
Metode getElementsByClassName() mengembalikan objek seperti array dari elemen anak dengan nama class yang ditentukan. Metode getElementsByClassName() tersedia pada elemen dokumen atau elemen lainnya.
Saat memanggil metode pada elemen dokumen, tag ini mencari seluruh dokumen dan mengembalikan elemen turunan dari dokumen :
let elements = document.getElementsByClassName(names);Namun, saat memanggil metode pada elemen tertentu, tag ini mengembalikan turunan dari elemen spesifik tersebut dengan nama class yang diberikan:
let elements = rootElement.getElementsByClassName(name);Metode mengembalikan elemen yang merupakan HTMLCollection langsung dari elemen yang cocok.
Parameter names adalah string yang mewakili satu atau lebih nama class untuk dicocokkan; Untuk menggunakan beberapa name class, Anda bisa memisahkannya dengan spasi.
Contoh metode getElementsByClassName() JavaScript
Mari kita ambil beberapa contoh penggunaan metode getElementsByClassName().
Misalkan Anda memiliki dokumen HTML berikut:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript getElementsByClassName</title>
</head>
<body>
<header>
<nav>
<ul id="menu">
<li class="item">HTML</li>
<li class="item">CSS</li>
<li class="item highlight">JavaScript</li>
<li class="item">TypeScript</li>
</ul>
</nav>
<h1>Demo getElementsByClassName</h1>
</header>
<section>
<article>
<h2 class="kedua">Contoh 1</h2>
</article>
<article>
<h2 class="kedua">Contoh 2</h2>
</article>
</section>
</body>
</html>
1. Memanggil JavaScript getElementsByClassName() pada contoh elemen
Contoh berikut mengilustrasikan cara menggunakan metode getElementsByClassName() untuk memilih item <li> yang merupakan turunan dari elemen <ul>:
let menu = document.getElementById('menu');
let items = menu.getElementsByClassName('item');
let data = [].map.call(items, item => item.textContent);
console.log(data);Hasil:
Bagaimana script ini bekerja:
Pertama, metode getElementById() akan memilih elemen <ul> dengan nama id menu.
Kemudian, metode getElementsByClassName() akan memilih elemen <li>, yang merupakan turunan dari elemen <ul>.
Terakhir, buat array konten teks dari elemen <li> dengan meminjam metode map() dari objek Array.
2. Memanggil JavaScript getElementsByClassName() pada contoh dokumen
Untuk mencari elemen dengan class kedua, Anda bisa menggunakan kode berikut:
let elements = document.getElementsByClassName('kedua);
let data = [].map.call(elements, elem => elem.textContent);
console.log(data);Hasil:
Contoh ini memanggil metode getElementsByClassName() pada objek dokumen. Oleh karena itu, ia mencari elemen dengan class kedua di seluruh dokumen.
Kesimpulan
Gunakan metode JavaScript getElementsByClassName() untuk memilih elemen turunan dari elemen yang memiliki satu atau lebih nama class.
