javaScript HTML DOM Collections

HTMLCollection arabirimi, öğelerin sıralamasında (belgede belirtilen sırada) genelleştirilmiş bir koleksiyon (bir dizi gibi davranan bir nesne) olup içeriğinde saklanan öğeleri almak için methodlar ve özellikler sağlar.

DOM öğelerini saklarken kullanılan HTMLCollection dinamiktir. Belgeyi değiştirdiğinizde, yapılan tüm değişiklikler hemen yansıtılır.

item() methodu, bir HTMLCollection numaralı eleman döndürür. JavaScript'te, HTMLCollection öğesinin bir dizi olarak ele alınması ve dizi gösterimini kullanarak dizinlemesi daha kolaydır.

Aşağıdaki kod, bir belgedeki tüm <p> öğelerini seçer:

var x = document.getElementsByTagName("p");

Koleksiyondaki öğelere bir dizin numarası ile erişilebilir.

İkinci <p> ​​öğesine erişmek için şunları yazabilirsiniz.

y =x.item(1);//item() methodu bu şekilde kullanın.

y =x[1];//Ancak bu gösterim daha kolay ve daha yaygın

Not : Dizin 0'dan başlar.

HTML HTMLCollection Uzunluğu

Length özelliği, bir HTMLCollection öğesinin sayısını gösterir.

HTML :

<p>javaScript</p>

<p>javaScript</p>

<p>javaScript</p>

javascript :

var x = document.getElementsByTagName("p");

alert(x.length);// ÇIKTI:3

Bir koleksiyondaki öğeler arasında döngü kurmak istediğinizde length özelliği yararlıdır :

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

<p>javaScript</p>

<p>javaScript</p>

<p>javaScript</p>

<button onclick="renk()">Tıkla</button>

javascript :

function renk() {

    var x= document.getElementsByTagName("p");

    var i;

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

        x[i].style.color = "green";
    }
}

Not : Bir HTMLCollection bir dizi DEĞİLDİR! Bir HTMLCollection bir dizi gibi görünebilir, ancak dizi değildir. Listeyi dolaşırken ve bir sayıya sahip elemanlara (bir dizi gibi) başvurabilirsiniz. Bununla birlikte, bir HTMLCollection'da valueOf (), pop(), push() veya join() gibi dizi methodları kullanamazsınız.