HTML DOM NodeList Referans Kılavuzu

NodeList

NodeList, benzer bir dizili düğüm nesnelerinin topluluğudur (liste).

NodeList içindeki düğümler, dizin numarası ile erişilebilir (0'dan başlar).

length özelliğiNodeList içindeki düğüm sayısını döndürür.

NodeList vs. HTMLCollection

NodeList ile HTMLCollection Neredeyse aynıdır.

Aşağıdaki açıklamaları görmek için lütfen sayfanın altına bakın.

Kim NodeList döndürür?

childNodes özelliği

querySelectorAll() yöntemi

getElementsByName() yöntemi

özellikler ve yöntemler

NodeList üzerinde aşağıdaki özellikler ve yöntemleri kullanabilirsiniz：

ad tanım
entries() Anahtar/değer çiftleri döndüren döndürücüden döner.
forEach() Listedeki her düğüm için geri çağrı fonksiyonu çalıştırır.
item() Belirtilen dizin numarasındaki düğümü döndürür.
keys() Listedeki anahtarları kullanarak döndüren döndürücü.
length NodeList içindeki düğüm sayısını döndürür.
values() değerleri döndüren listeyi kullanarak.

örnek

belge içindeki tüm <p> düğüm:

const myNodeList = document.querySelectorAll("p");

NodeList içindeki öğeler, dizin numarası ile erişilebilir.

İkinci <p> düğümüne erişmek için yazabilirsiniz:

myNodeList[1]

Kişisel olarak deneyin

Dikkat:dizin 0'dan başlar.

HTML DOM Node List Length

length özellik, düğüm listesindeki düğüm sayısını tanımlar:

örnek 1

myNodelist.length

Kişisel olarak deneyin

Düğüm listesindeki düğümleri dolaşmak istediğinizde:length özellikler çok kullanışlıdır：

örnek 2

更改节点列表中所有 <p> 元素的颜色：

const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
  myNodelist[i].style.color = "red";
}

Kişisel olarak deneyin

Dizi değil

NodeList dizi değil!

NodeList bir dizi gibi görünse de, bu böyle değildir.

NodeList'i tarayabilir ve düğümlerine indeks referansı ile erişebilirsiniz.

Ancak NodeList üzerinde Array yöntemlerini kullanamazsınız, örneğin push()、pop() veya join().

HTMLCollection ile NodeList arasındaki fark

NodeList ile HTMLcollection Çok benzer.

Her ikisi de belgeden çıkarılan düğümlerden (elementlerden) oluşan benzer dizi koleksiyonlarıdır (listeler). Düğümlere indeks numarası ile erişilebilir. İndeks 0'dan başlar.

Her ikisi de length özelliğidöndürür, bu da listede (koleksiyonda) element sayısını döndürür.

HTMLCollectionDoküman elementikoleksiyonu.

NodeListDoküman düğümü（element düğümü, özellik düğümü ve metin düğümü）koleksiyonu.

HTMLCollection öğeleri isimleri, id'leri veya indexleri ile erişilebilir.

NodeList öğeleri sadece它们的索引号 ile erişilebilir.

HTMLCollection her zaman birGerçek zamanlıKoleksiyon. Örneğin: <li> elementini DOM'daki listede eklediğinizde, HTMLCollection'teki liste değişir.

NodeList genellikle birStatikKoleksiyon. Örneğin: <li> elementini DOM'daki listede eklediğinizde, NodeList'teki liste değişmez.

getElementsByClassName() ve getElementsByTagName() Metot gerçek zamanlı HTMLCollection döndürür.

querySelectorAll() Metot statik NodeList döndürür.

childNodes Özellik gerçek zamanlı NodeList döndürür.

Gerçek zamanlı düğüm listesi

Bazı durumlarda NodeListGerçek zamanlı：DOM'daki değişiklikler NodeList'i günceller.

childNodes Metot gerçek zamanlı NodeList döndürür.