Bir NodeList nesnesi, bir dosyadan çıkarılan düğümlerin bir listesidir (koleksiyonudur). belge.
Bir NodeList nesnesi, bir HTMLCollection nesnesiyle hemen hemen aynıdır.
Bazı (eski) tarayıcılar HTMLCollection yerine NodeList nesnesi döndürür getElementsByClassName() gibi yöntemler için.
Tüm tarayıcılar childNodes özelliği için bir NodeList nesnesi döndürür.
Çoğu tarayıcı, querySelectorAll() yöntemi için bir NodeList nesnesi döndürür.
Aşağıdaki kod, bir belgedeki tüm <p> düğümlerini seçer:
const myNodeList = document.querySelectorAll("p");NodeList'teki öğelere bir dizin numarasıyla erişilebilir.
Erişmek için ikinci <p> düğümünü yazabilirsiniz:
myNodeList[1]Not: Dizin 0'dan başlar.
length özelliği, bir düğüm listesindeki düğüm sayısını tanımlar:
myNodelist.lengthlength özelliği, bir düğümdeki düğümler arasında döngü yapmak istediğinizde kullanışlıdır liste:
Bir düğümdeki tüm <p> öğelerinin rengini değiştirme liste:
const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "red";
}Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<p>Hello World!</p>
<p>Hello Norway!</p>
<p>Click the button to change the color of all p elements.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "red";
}
}
</script>
</body>
</html>
NodeList ve HTMLcollection hemen hemen aynı şeydir.
Her ikisi de bir diziden çıkarılan düğümlerin (öğelerin) dizi benzeri koleksiyonlarıdır (listeleri). belge. Düğümlere indeks numaralarıyla erişilebilir. Endeks 0'dan başlar.
Her ikisinde de listedeki (koleksiyon) öğelerin sayısını döndüren bir uzunluk özelliği bulunur.
HTMLCollection, belge öğelerinin koleksiyonudur.
NodeList, belge düğümlerinden (öğe düğümleri, öznitelik düğümleri ve metin düğümleri) oluşan bir koleksiyondur.
HTMLCollection öğelerine adlarına, kimliklerine veya dizin numaralarına göre erişilebilir.
NodeList öğelerine yalnızca dizin numaralarıyla erişilebilir.
Bir HTMLCollection her zaman canlı bir koleksiyondur. Örnek: DOM'daki bir listeye
Bir NodeList çoğunlukla statik bir koleksiyondur. Örnek: DOM'daki bir listeye
getElementsByClassName() ve getElementsByTagName() yöntemler canlı bir HTMLCollection döndürür.
querySelectorAll() yöntemi statik bir NodeList döndürür.
childNodes özelliği canlı bir NodeList döndürür.
Bir NodeList bir dizi gibi görünebilir, ancak değildir.
Bir NodeList'te döngü yapabilir ve düğümlerine dizine göre başvurabilirsiniz.
Ancak NodeList'te Push(), pop() veya join() gibi Array yöntemlerini kullanamazsınız.