NodeList berbanding HTMLCollection
Fahami perbezaan antara koleksi elemen.
NodeList berbanding HTMLCollection ialah pelajaran Akademi JavaScript percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Akademi JavaScript, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.
Dua Jenis Koleksi
Kaedah DOM mengembalikan salah satu daripada dua objek seperti senarai: NodeList atau HTMLCollection. Kedua-duanya kelihatan serupa tetapi berbeza dalam beberapa perkara penting.
Asal NodeList
querySelectorAll dan childNodes mengembalikan objek NodeList. Yang daripada querySelectorAll adalah statik: gambaran yang diambil pada masa carian.
const items = document.querySelectorAll(".item"); // static NodeListAsal HTMLCollection
getElementsByClassName, getElementsByTagName dan sifat children mengembalikan objek HTMLCollection dinamik.
const items = document.getElementsByClassName("item"); // live HTMLCollectionStatik berbanding Dinamik
NodeList statik mengekalkan kandungan asalnya walaupun DOM berubah. Koleksi HTML dinamik pula mencerminkan penambahan dan pembuangan secara automatik.
const liveList = document.getElementsByClassName("item");
const staticList = document.querySelectorAll(".item");
// add a new .item later:
// liveList.length increases, staticList.length does notSokongan forEach
NodeList mempunyai forEach terbina dalam. HTMLCollection tidak mempunyainya, jadi anda mesti menukarnya atau menggunakan gelung indeks.
document.querySelectorAll(".item").forEach((el) => {
console.log(el.textContent);
});Kedua-duanya Bukan Tatasusunan Sebenar
Kedua-duanya kelihatan seperti tatasusunan: mempunyai length dan akses indeks, tetapi tidak mempunyai map, filter dan reduce.
const list = document.querySelectorAll(".item");
// list.map is undefinedMenukar dengan Array.from
Array.from menukar mana-mana koleksi kepada tatasusunan sebenar, lalu membolehkan semua kaedah tatasusunan digunakan.
const arr = Array.from(document.querySelectorAll(".item"));
const texts = arr.map((el) => el.textContent);Menukar dengan Sebaran
Operator sebaran ialah pilihan ringkas yang turut menghasilkan tatasusunan sebenar.
const arr = [...document.getElementsByClassName("item")];
const visible = arr.filter((el) => !el.hidden);Perangkap Gelung Senarai Dinamik
Membuang elemen semasa mengulangi koleksi HTML dinamik mengalihkan indeks dan menyebabkan item terlepas. Tukarkannya kepada tatasusunan dahulu untuk mengulang dengan selamat.
const items = [...document.getElementsByClassName("done")];
items.forEach((el) => el.remove()); // safeMengindeks Kedua-duanya
Kedua-duanya menyokong pengindeksan berangka dan length, jadi akses asas kelihatan sama walaupun tingkah laku asasnya berbeza.
const a = document.querySelectorAll(".item");
const b = document.getElementsByClassName("item");
console.log(a[0], b[0], a.length, b.length);Memilih yang Betul
Gunakan querySelectorAll apabila anda mahukan gambaran stabil dan forEach terbina dalam. Gunakan koleksi dinamik apabila anda benar-benar memerlukan senarai itu kekal selaras dengan DOM.
Semakan Ringkas
Kenal pasti perbezaannya.
Ringkasan
NodeList (daripada querySelectorAll) adalah statik dan mempunyai forEach; koleksi HTML (daripada getElementsByClassName, getElementsByTagName dan anak) adalah dinamik serta tidak mempunyai forEach. Kedua-duanya bukan tatasusunan sebenar; gunakan Array.from atau sebaran untuk menukarnya sebelum menggunakan map/filter/reduce, dan untuk mengulang dengan selamat semasa mengubah suai koleksi.
Pelajari JavaScript dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 59
- Pelajaran
- 200
Soalan Lazim
Adakah pelajaran “NodeList berbanding HTMLCollection” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Akademi JavaScript, termasuk “NodeList berbanding HTMLCollection”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “NodeList berbanding HTMLCollection”?
Fahami perbezaan antara koleksi elemen. Anda berlatih Akademi JavaScript menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Akademi JavaScript?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Akademi JavaScript di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.
Berapa lamakah pelajaran “NodeList berbanding HTMLCollection” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Akademi JavaScript ini?
Ya. Setiap pelajaran Akademi JavaScript menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Memilih Elemen dengan querySelector
- getElementById dan getElementsByClassName
- Menelusuri Induk, Anak dan Adik-beradik
- NodeList berbanding HTMLCollection