javaScript HTML DOM Node Lists

NodeList nesneleri, Node.childNodes ve document.querySelectorAll() methodu gibi özelliklerle döndürülen düğümlerin koleksiyonlarıdır.

NodeList nesnesi HTMLCollection nesnesi ile hemen hemen aynıdır.

Bazı (eski) tarayıcılar, getElementsByClassName() gibi yöntemler için bir HTMLCollection yerine bir NodeList nesnesi döndürür .

ÖRNEK :

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

NodeList içindeki öğelere bir dizin numarası ile erişilebilir. İkinci <p> ​​düğümüne erişmek için şunları yazabilirsiniz:

x = List[1];

Not : Dizin 0'dan başlar.

HTML DOM Düğüm Listesi Uzunluğu

Length özelliği, bir düğüm listesindeki düğüm sayısını tanımlar:

//Tüm "p" öğelerinin listesini oluşturma

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

//Listenin uzunluğunu görüntüle

document.getElementById("test").innerHTML = list.length;

Length (Uzunluk) özelliği, bir düğüm listesinde düğümler arasında döngü oluşturmak istediğinizde kullanışlıdır:

ÖRNEK :

Bir düğüm listesindeki tüm <p> öğelerinin arka plan rengini değiştirin:

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

for (var i = 0; i < myNodelist.length; i++) {

    myNodelist[i].style.backgroundColor = "green";

}

HTMLCollection ve NodeList Arasındaki Fark

Bir HTMLCollection HTML öğelerinin bir koleksiyonudur.

Bir NodList, belge düğümlerin bir koleksiyonudur.

NodeList ve HTMLCollection, dizi benzeri nesnelerdir. lenght özelliğine sahipler ve elemanlarına bir dizi gibi erişebilmeniz için 0, 1, 2, ..., n adında index özelliklere sahipler.

NodeList düğümler topluluğudur. Htmlcollection html/XML öğeleri topluluğudur. NodeList daha genel bir kapsayıcıdır. Örneğin, <P> etiketinin metin içeriği bir düğümdür ancak HTML öğesi değildir.

HTMLCollection, NodeList'te olmayan namedItem() yöntemine sahiptir.

NodeList ve HTMLCollection her zaman canlı nesneler DEĞİLDİR. Örneğin: document.querySelectorAll(css_selector) canlı olmayan bir nesne döndürür.

NodeList ve HTMLCollection, Array nesnesinden devralınmaz. Onların üzerinde dizi yöntemlerini kullanmak için, yöntemini şu şekilde özel bir şekilde çağırmalısınız:

Array.prototype.map.call(arguments, function)

NodeList veya HTMLCollection'ın canlı nesne olup olmadığını öğrenmenin yerleşik bir yolu yoktur.

Canlı nesnelerle çalışırken dikkatli olmalı, bir döngü içinde eleman eklememeli veya kaldırmamalısın.

HTMLCollection öğelerine, adlarına, kimliğine veya dizin numaralarına erişilebilir.

NodeList öğelerine yalnızca dizin numaralarıyla erişilebilir.

NodeList nesnesi öznitelik düğümlerini ve metin düğümlerini içerebilir.

Dizi benzeri nesneleri ulaşmanın en destekli ve en güvenli ve en hızlı yolu bir döngü oluşturmaktır:

 for (var i = 0; i < myNodeList.length; ++i)
 
 {… myNodeList[i] …}
 

NodeList nesnesi, düğümlerin bir koleksiyonudur. NodeList arabirimi, bu koleksiyonun nasıl uygulandığını tanımlamadan veya kısıtlamadan düzenli düğüm koleksiyonunun soyutlamasını sağlar. DOM'daki NodeList nesneleri, onları almak için kullanılan arayüze dayalı canlı veya statik nesnelerdir.

Bu ne anlama geliyor? Bu, canlı koleksiyonlar, değiştirilirse, program çalıştıkça güncellendiği anlamına gelir.

Kapsayıcıdaki her değer için ilişkili bir dizin vardır. Ancak bu, bir nesnenin de sahip olabileceği bir özelliktir.

  var nesne = {
  
    0: 'Elma',
    1: 'Kiraz',
    2: 'Erik',
    3: 'Kivi'
};

alert(nesne[0]); // 'Elma'

alert(nesne[3]); // 'Kivi'

Node listesi bir dizi değildir!

Bir düğüm listesi bir dizi gibi görünebilir, ancak değil.

Düğüm listesinde döngü oluşturabilir ve düğümlerine bir dizi gibi bakabilirsiniz.

Bununla birlikte, bir düğüm listesinde valueOf(), push(), pop() veya join() gibi Dizi methodla'rını kullanamazsınız.

HTMLCollection veya NodeList döndüren bazı DOM yöntemleri:

// Return HTMLCollection

document.anchors

document.applets

document.forms

document.images

document.links

formElement.elements

selectElement.options

tableElement.rows

tableElement.tBodies

tableRowElement.cells

document.getElementsByName

document.getElementsByClassName

element.getElementsByClassName

document.getElementsByTagName

// Return  NodeList

Node.childNodes

// Return a static NodeList

// güncelleme yapmaz. 

document.querySelectorAll

element.querySelectorAll