JavaScript - Koleksi DOM

Hai pembaca, para pemula pemrogram! Hari ini, kita akan melihat dunia yang menarik dari Koleksi DOM di JavaScript. Jangan khawatir jika Anda baru belajar pemrograman - saya akan memandu Anda secara langkah demi langkah, seperti yang telah saya lakukan bagi banyak siswa selama tahun-tahun mengajar saya. Jadi, ambillah secangkir kopi (atau minuman favorit Anda), dan mari kita mulai!

Objek HTMLCollection

Bayangkan Anda berada di perpustakaan, dan Anda ingin mencari semua buku tentang JavaScript. Petugas perpustakaan memberikan Anda kereta khusus yang berisi semua buku itu. Dalam dunia pengembangan web, kereta ini seperti HTMLCollection - koleksi elemen HTML yang kita dapat kerjakan menggunakan JavaScript.

Apa itu HTMLCollection?

HTMLCollection adalah objek seperti daftar yang mewakili koleksi elemen HTML di halaman web. Itu "hidup", berarti itu secara otomatis akan terupdate saat dokumen dasar berubah.

mari kita lihat contoh sederhana:

<div class="book">JavaScript Dasar</div>
<div class="book">JavaScript Lanjutan</div>
<div class="book">Manipulasi DOM</div>

<script>
let books = document.getElementsByClassName('book');
console.log(books);
console.log(books.length); // Keluaran: 3
</script>

Dalam contoh ini, books adalah HTMLCollection yang berisi semua elemen dengan kelas "book". Properti length memberitahu kita berapa banyak elemen ada dalam koleksi.

Mengakses Elemen dalam HTMLCollection

Anda dapat mengakses elemen dalam HTMLCollection seperti Anda akan mengakses array:

console.log(books[0].innerText); // Keluaran: "JavaScript Dasar"
console.log(books[1].innerText); // Keluaran: "JavaScript Lanjutan"
console.log(books[2].innerText); // Keluaran: "Manipulasi DOM"

Namun, ingat bahwa HTMLCollection bukanlah array. Itu seperti array, tapi itu tidak memiliki semua metode yang dimiliki array.

Melakukan Looping Melalui HTMLCollection

Untuk mengiterasi semua elemen dalam HTMLCollection, Anda dapat menggunakan loop for:

for (let i = 0; i < books.length; i++) {
console.log(books[i].innerText);
}

Atau, jika Anda memilih pendekatan yang lebih modern, Anda dapat mengkonversi HTMLCollection ke array dan menggunakan metode array:

Array.from(books).forEach(book => {
console.log(book.innerText);
});

Koleksi Object Dokumen dan Elemen DOM

Sekarang kita mengerti HTMLCollection, mari kita jelajahi beberapa cara umum untuk membuat koleksi elemen DOM.

document.getElementsByTagName()

Metode ini mengembalikan HTMLCollection elemen dengan nama tag yang ditentukan.

<p>Paragraf Pertama</p>
<p>Paragraf Kedua</p>
<p>Paragraf Ketiga</p>

<script>
let paragraphs = document.getElementsByTagName('p');
console.log(paragraphs.length); // Keluaran: 3

for (let i = 0; i < paragraphs.length; i++) {
console.log(paragraphs[i].innerText);
}
</script>

document.getElementsByClassName()

Kita telah melihat ini sebelumnya, tapi mari kita mendalaminya sedikit:

<div class="fruit">Apel</div>
<div class="fruit">Pisang</div>
<div class="fruit">Jeruk</div>

<script>
let fruits = document.getElementsByClassName('fruit');
console.log(fruits.length); // Keluaran: 3

Array.from(fruits).forEach(fruit => {
console.log(fruit.innerText);
});
</script>

document.querySelectorAll()

Metode ini yang kuat mengembalikan NodeList (yang mirip dengan HTMLCollection) semua elemen yang cocok dengan pemilih CSS:

<ul>
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
</ul>

<script>
let items = document.querySelectorAll('ul .item');
console.log(items.length); // Keluaran: 3

items.forEach(item => {
console.log(item.innerText);
});
</script>

Catatan bahwa tidak seperti HTMLCollection, NodeList yang dikembalikan oleh querySelectorAll() tidak hidup dan memiliki metode forEach bawaan.

Perbandingan Metode Koleksi

Berikut adalah tabel praktis yang menggabungkan metode koleksi yang kita diskusikan:

Metode	Mengembalikan	Hidup?	Use Case
getElementsByTagName()	HTMLCollection	Ya	Ketika Anda memerlukan elemen dari tag tertentu
getElementsByClassName()	HTMLCollection	Ya	Ketika Anda memerlukan elemen dengan kelas tertentu
querySelectorAll()	NodeList	Tidak	Ketika Anda memerlukan elemen yang cocok dengan pemilih CSS

Ingat, "hidup" berarti koleksi secara otomatis akan terupdate saat DOM berubah.

Kesimpulan

Dan itu adalah, teman-teman sekolah! Kita telah melakukan perjalanan melalui tanah Koleksi DOM, dari HTMLCollection ke berbagai metode pengumpulan elemen DOM. Alat ini sangat penting untuk memanipulasi halaman web dengan JavaScript, memungkinkan Anda untuk memilih dan mengubah elemen dengan mudah.

Sekarang, saat Anda berlatih konsep ini, Anda akan merasa semakin nyaman dengan manipulasi DOM. Itu seperti belajar memainkan alat musik - awalnya mungkin terlihat sulit, tapi dengan latihan, Anda akan menciptakan simfoni web yang indah dalam waktu singkat!

Ingat, kunci untuk menjadi ahli pemrograman adalah latihan dan kecurigaan. Jangan takut untuk mencoba metode ini, mencoba berbagai skenario, dan terutama, bersenang-senang saat mengoding!

Sampai jumpa lagi, selamat coding!

Credits: Image by storyset