JavaScript HTML DOM Düğüm Listesi

Kurs tavsiyesi:

HTML DOM NodeList nesnesi NodeList

Nesne, belgeden çıkarılan düğüm listesidir (toplama).

NodeList nesnesi ile HTMLCollection nesnesi neredeyse aynıdır. kullanıldığında getElementsByClassName()

Tüm tarayıcılar, bu metodu childNodes özelliği

Çoğu tarayıcı, bu özelliği querySelectorAll() Metod, NodeList nesnesi döndürür.

Aşağıdaki kod, belgedeki tüm <p> düğümünü seçer:

Örnek

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

}

NodeList'teki elementler, indeks numarası ile erişilebilir.

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

y = myNodeList[1];

Açıklama:İndeks 0'dan başlar.

HTML DOM Node List Uzunluğu

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

Örnek

var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = myNodelist.length;

}

Örnek açıklaması:

  • Tüm <p> elementlerinin listesini oluşturun
  • Bu listanın uzunluğunu gösterin

length Özellik, düğüm listesindeki düğümleri dolaşmak istediğinizde kullanışlıdır:

Örnek

Tüm <p> elementlerinin arka plan rengini değiştirin:

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

}

Kişisel olarak deneyin

HTMLCollection ve NodeList arasındaki fark

HTMLCollection (önceki bölüm), HTML elementlerinin koleksiyonudur.

NodeList, belge düğümlerinin koleksiyonudur.

HTMLCollection ve NodeList nesneleri, sınıf array olan nesne listeleri (koleksiyonları)dır.

Bunlar, tanımlı listeler (koleksiyonlar) içindeki öğe sayısını tanımlar. length Özellik.

Bunlar, tüm öğelerin sayısını tanımlayan tanımlı listeler (koleksiyonlar) üzerinden her bir öğeye (proje) array gibi (0, 1, 2, 3, 4, ...) erişebilir.

HTMLCollection öğelerine erişim, adları, id'leri veya indeks numaraları üzerinden yapılabilir.

NodeList öğelerine erişim, yalnızca onların indeks numaraları üzerinden yapılabilir.

Yalnızca NodeList nesneleri özellik düğümleri ve metin düğümleri içerebilir.

Düğüm listesi array değil!

Düğüm dizisi array gibi görünse de, array değildir.

Düğüm listesini dolaşabilir ve onların düğümlerini array gibi kullanabilirsiniz.

Ancak, düğüm listesini array yöntemleriyle kullanamazsınız, örneğin valueOf()vepush()vepop() veya join().