JavaScript Academy · Pelajaran

NodeList vs HTMLCollection

Pahami perbedaan antara kumpulan elemen.

NodeList vs HTMLCollection adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Dua Jenis Koleksi

Metode DOM mengembalikan salah satu dari dua objek mirip daftar: NodeList atau HTMLCollection. Keduanya tampak serupa, tetapi memiliki perbedaan penting.

Asal NodeList

querySelectorAll dan childNodes mengembalikan objek NodeList. Objek yang berasal dari querySelectorAll bersifat statis: gambaran yang diambil saat pencarian dilakukan.

const items = document.querySelectorAll(".item"); // static NodeList

Asal Koleksi HTML

getElementsByClassName, getElementsByTagName, dan properti children mengembalikan objek HTMLCollection yang dinamis.

const items = document.getElementsByClassName("item"); // live HTMLCollection

Statis vs Dinamis

NodeList statis mempertahankan isi awalnya meskipun DOM berubah. Koleksi HTML dinamis secara otomatis mencerminkan penambahan dan penghapusan.

const liveList = document.getElementsByClassName("item");
const staticList = document.querySelectorAll(".item");
// add a new .item later:
// liveList.length increases, staticList.length does not

Dukungan forEach

NodeList memiliki forEach bawaan. HTMLCollection tidak memilikinya, jadi Anda harus mengonversinya atau menggunakan perulangan berdasarkan indeks.

document.querySelectorAll(".item").forEach((el) => {
  console.log(el.textContent);
});

Keduanya Bukan Larik Sungguhan

Keduanya mirip larik: memiliki length dan akses berdasarkan indeks, tetapi tidak memiliki map, filter, dan reduce.

const list = document.querySelectorAll(".item");
// list.map is undefined

Mengonversi dengan Array.from

Array.from mengubah salah satu koleksi menjadi larik sungguhan, sehingga semua metode larik dapat digunakan.

const arr = Array.from(document.querySelectorAll(".item"));
const texts = arr.map((el) => el.textContent);

Mengonversi dengan Operator Spread

Operator spread adalah alternatif ringkas yang juga menghasilkan larik sungguhan.

const arr = [...document.getElementsByClassName("item")];
const visible = arr.filter((el) => !el.hidden);

Jebakan Perulangan Daftar Dinamis

Menghapus elemen saat melakukan pengulangan pada koleksi HTML dinamis menggeser indeks dan melewatkan beberapa item. Konversikan koleksi menjadi larik terlebih dahulu agar dapat melakukan pengulangan dengan aman.

const items = [...document.getElementsByClassName("done")];
items.forEach((el) => el.remove()); // safe

Mengindeks Keduanya

Keduanya mendukung pengindeksan numerik dan length, sehingga akses dasar tampak sama meskipun perilaku dasarnya berbeda.

const a = document.querySelectorAll(".item");
const b = document.getElementsByClassName("item");
console.log(a[0], b[0], a.length, b.length);

Memilih yang Tepat

Gunakan querySelectorAll saat Anda menginginkan gambaran stabil dengan forEach bawaan. Gunakan koleksi dinamis jika Anda memang memerlukan daftar yang tetap selaras dengan DOM.

Pemeriksaan Singkat

Temukan perbedaannya.

Rangkuman

NodeList (dari querySelectorAll) bersifat statis dan memiliki forEach; koleksi HTML (dari getElementsByClassName, getElementsByTagName, dan elemen anak) bersifat dinamis serta tidak memiliki forEach. Keduanya bukan larik sungguhan; gunakan Array.from atau spread untuk mengonversinya sebelum menggunakan map/filter/reduksi, dan untuk melakukan pengulangan dengan aman saat mengubah isi koleksi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “NodeList vs HTMLCollection” gratis?

Ya — teks lengkap “NodeList vs HTMLCollection” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “NodeList vs HTMLCollection”?

Pahami perbedaan antara kumpulan elemen. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “NodeList vs HTMLCollection” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Memilih Elemen dengan querySelector
getElementById dan getElementsByClassName
Menelusuri Induk, Anak, dan Saudara
NodeList vs HTMLCollection

← Kembali ke JavaScript Academy