JavaScript - Koleksi DOM

Halo sana, para pemula pemrograman! Hari ini, kita akan mendalam ke dunia yang menarik dari Koleksi DOM di JavaScript. Jangan khawatir jika Anda baru saja memulai pemrograman - saya akan memandu Anda dalam perjalanan ini langkah demi langkah, sama seperti yang saya lakukan bagi ribuan murid selama tahun-tahun mengajar saya. Jadi, ambil secangkir kopi (atau minuman favorit Anda), dan mari kita mulai!

Object HTMLCollection

Bayangkan Anda berada di perpustakaan, dan Anda ingin menemukan semua buku tentang JavaScript. Petugas perpustakaan memberikan Anda kereta khusus yang berisi semua buku ini. Dalam dunia pengembangan web, kereta ini seperti sebuah HTMLCollection - sebuah koleksi elemen HTML yang kita bisa 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 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 di HTMLCollection

Anda bisa mengakses elemen di HTMLCollection seperti yang Anda lakukan dengan 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 di HTMLCollection, Anda bisa menggunakan loop for:

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

Atau, jika Anda lebih suka pendekatan modern, Anda bisa mengkonversi HTMLCollection menjadi array dan menggunakan metode array:

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

Koleksi Object document dan Elemen DOM

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

document.getElementsByTagName()

Metode ini mengembalikan HTMLCollection dari 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) dari 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 berbeda dengan HTMLCollection, NodeList yang dikembalikan oleh querySelectorAll() tidak hidup dan memiliki metode forEach bawaan.

Perbandingan Metode Koleksi

Berikut adalah tabel ringkasan metode koleksi yang kita diskusikan:

Metode	Mengembalikan	Hidup?	Kasus Penggunaan
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 terupdate saat DOM berubah.

Kesimpulan

Dan begitu, teman-teman sekolah! Kita telah berpergian melalui negeri Koleksi DOM, dari HTMLCollection ke berbagai metode pengumpulan elemen DOM. Alat ini adalah dasar untuk memanipulasi halaman web dengan JavaScript, memungkinkan Anda untuk memilih dan mengubah elemen dengan mudah.

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 berlatih, 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 berkoding!

Credits: Image by storyset