JavaScript HTML DOM Düğüm Listeleri
HTML DOM NodeList Nesnesi
Nesne, bir NodeListbelgeden çıkarılan düğümlerin bir listesidir (koleksiyon).
Bir NodeListnesne neredeyse bir nesne ile aynıdır HTMLCollection.
Bazı (eski) tarayıcılar, gibi yöntemler için HTMLCollection yerine bir NodeList nesnesi döndürür getElementsByClassName().
Tüm tarayıcılar, özellik için bir NodeList nesnesi döndürür childNodes.
Çoğu tarayıcı, yöntem için bir NodeList nesnesi döndürür querySelectorAll().
Aşağıdaki kod <p>, bir belgedeki tüm düğümleri seçer:
Örnek
const myNodeList = document.querySelectorAll("p");
NodeList'teki öğelere bir dizin numarasıyla erişilebilir.
İkinci <p> düğümüne erişmek için şunu yazabilirsiniz:
myNodeList[1]
Not: İndeks 0'dan başlar.
HTML DOM Düğüm Listesi Uzunluğu
Özellik length, bir düğüm listesindeki düğüm sayısını tanımlar:
Örnek
myNodelist.length
Bu lengthözellik, bir düğüm listesindeki düğümler arasında döngü yapmak istediğinizde kullanışlıdır:
Örnek
Bir düğüm listesindeki tüm <p> öğelerinin rengini değiştirin:
const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "red";
}
HTMLCollection ve NodeList Arasındaki Fark
Bir HTMLCollection(önceki bölüm), HTML öğelerinin bir koleksiyonudur.
A NodeList, belge düğümlerinin bir koleksiyonudur.
Bir NodeList ve bir HTML koleksiyonu hemen hemen aynı şeydir.
Hem HTMLCollection nesnesi hem de NodeList nesnesi, nesnelerin dizi benzeri bir listesidir (koleksiyon).
Her ikisinin de listedeki (koleksiyon) öğe sayısını tanımlayan bir uzunluk özelliği vardır.
Her ikisi de bir dizi gibi her öğeye erişmek için bir dizin (0, 1, 2, 3, 4, ...) sağlar.
HTMLCollection öğelerine adları, kimlikleri veya dizin numaralarıyla erişilebilir.
NodeList öğelerine yalnızca dizin numaralarıyla erişilebilir.
Yalnızca NodeList nesnesi, öznitelik düğümleri ve metin düğümleri içerebilir.
Bir düğüm listesi bir dizi değildir!
Bir düğüm listesi bir dizi gibi görünebilir, ancak değildir.
Düğüm listesinde dolaşabilir ve bir dizi gibi düğümlerine başvurabilirsiniz.
Ancak, bir düğüm listesinde valueOf(), push(), pop() veya join() gibi Dizi Yöntemlerini kullanamazsınız.