JavaScript Academy · Ders

NodeList ve HTMLCollection Karşılaştırması

Öğe koleksiyonları arasındaki farkları anlayın.

4. ders / 413 adım

NodeList ve HTMLCollection Karşılaştırması, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

İki koleksiyon türü

DOM yöntemleri, liste benzeri iki nesne türünden birini döndürür: bir NodeList veya bir HTMLCollection. Benzer görünürler, ancak önemli yönlerden farklıdırlar.

NodeList nereden gelir

querySelectorAll ve childNodes, NodeList nesneleri döndürür. querySelectorAll'dan gelen liste statiktir: sorgu anında alınan bir anlık görüntüdür.

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

HTML öğe koleksiyonu nereden gelir

getElementsByClassName, getElementsByTagName ve children özelliği, canlı HTMLCollection nesneleri döndürür.

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

Statik ve canlı

Statik bir NodeList, DOM değişse bile ilk içeriğini korur. Canlı bir HTML öğe koleksiyonu ise eklemeleri ve kaldırmaları otomatik olarak yansıtır.

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

forEach desteği

NodeList yerleşik bir forEach yöntemine sahiptir. HTMLCollection ise sahip değildir; bu nedenle onu dönüştürmeniz veya dizin kullanan bir döngü yazmanız gerekir.

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

İkisi de gerçek dizi değildir

Her ikisi de dizi benzeridir: length ve dizin erişimine sahiptir, ancak map, filter ve reduce yöntemlerinden yoksundur.

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

Array.from ile dönüştürme

Array.from, her iki koleksiyonu da gerçek bir diziye dönüştürerek tüm dizi yöntemlerini kullanılabilir hâle getirir.

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

Yayma işleciyle dönüştürme

Yayma işleci, gerçek bir dizi de oluşturan kısa bir alternatiftir.

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

Canlı listeyle döngü tuzağı

Canlı bir HTML öğe koleksiyonu üzerinde yineleme yaparken öğeleri kaldırmak, dizinleri kaydırır ve bazı öğelerin atlanmasına neden olur. Güvenli şekilde yinelemek için önce koleksiyonu bir diziye dönüştürün.

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

Her ikisini dizinleme

Her ikisi de sayısal dizinlemeyi ve length özelliğini destekler. Bu nedenle, temel erişim biçimleri altta yatan davranışları farklı olsa da aynıdır.

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

Doğru olanı seçme

Sabit bir anlık görüntü ve yerleşik forEach istediğinizde querySelectorAll kullanın. Listenin DOM ile eşzamanlı kalmasına özellikle ihtiyaç duyduğunuzda canlı koleksiyonları kullanın.

Hızlı kontrol

Farkı bulun.

İnteraktif derste cevapla

Özet

NodeList'in (querySelectorAll'dan gelen) statik olduğunu ve forEach içerdiğini; HTML öğe koleksiyonunun (getElementsByClassName, getElementsByTagName ve children tarafından döndürülen) canlı olduğunu ve forEach içermediğini öğrendiniz. İkisi de gerçek dizi değildir; map/filter/azaltma işlemlerini kullanmadan ve değişiklik yaparken güvenli şekilde yinelemeden önce dönüştürmek için Array.from veya yayma işleci kullanın.

Başlamak ücretsiz

Yapay zeka eğitmeniyle JavaScript öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 59
Dersler: 200

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“NodeList ve HTMLCollection Karşılaştırması” dersi ücretsiz mi?

Evet — “NodeList ve HTMLCollection Karşılaştırması” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“NodeList ve HTMLCollection Karşılaştırması” dersinde ne öğreneceğim?

Öğe koleksiyonları arasındaki farkları anlayın. JavaScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te JavaScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“NodeList ve HTMLCollection Karşılaştırması” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

querySelector ile Öğe Seçme
getElementById ve getElementsByClassName
Üst, Alt ve Kardeş Öğeler Arasında Gezinme
NodeList ve HTMLCollection Karşılaştırması

← JavaScript Academy Sayfasına Dön