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.


Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

4619

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.